@extends('app')
@section('head')
<style>
    /* Специальные стили для страницы товаров поставщика */
    .settings__main {
        width: 100% !important;
    }
    table{
        width: 100% !important;
    }
    table thead th{
        text-align: center !important;
    }
    table tbody td{
        text-align: center !important;
    }
    table tbody td img{
        width: 100px !important;
    }
    table tbody td:first-child {
        text-align: left !important;
    }
    table tbody td:last-child {
        text-align: right !important;
    }
    table thead th:first-child {
        text-align: left !important;
    }
    table thead th:last-child {
        text-align: right !important;
    }
</style>
@endsection
@section('content')
<main>
    <section class="profile">
        <div class="container">
            {{-- Используем единый компонент шапки профиля --}}
            <x-profile-header :user="$user" />

            <!-- Модальное окно для загрузки фото -->
            <div class="modal" id="uploadImageModal" tabindex="-1" role="dialog" style="display: none">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" style="display: inline">Загрузить фото обложки</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                    style="font-size: 25px; margin-top: -5px;float: right;background-color: #f8f9fa">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form id="uploadImageForm" action="{{ route('saveIntroImage') }}" method="POST"
                              enctype="multipart/form-data">
                            @csrf
                            <p style="margin-left: 20px;margin-top: 10px">Выберите изображение (размер: 1490x192):</p>
                            <div style="margin-left: 20px; margin-top: 10px;">
                                <p>Допустимые форматы: JPG, JPEG, PNG.</p>
                                <p>Максимальный размер: 2 МБ.</p>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <input type="file" name="image" class="dropify" data-default-file=""
                                           data-height="180" accept=".jpg, .jpeg, .png"
                                           style="width: 100%;margin-top: 5px!important;">
                                    @error('image')
                                    <span style="color: red">* {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn-main settings__btn">Сохранить</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </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" style="position: relative">
                    <form action="{{ route('supplier.updateProfile') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        {{-- Учетная запись --}}
                        <div class="settings__user">
                            <div class="settings__user-header">
                                <p class="settings-title settings__user-title">Учетная запись</p>
                            </div>
                            <div class="form-group">
                                <label class="settings__label">Имя пользователя</label>
                                <div class="form-inline">
                                    <input class="input-main settings__input" type="text" name="name"
                                           value="{{ $user->name ?? '' }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="settings__label">E-mail (частный)</label>
                                <div class="form-inline">
                                    <input class="input-main settings__input" type="text" name="email"
                                           value="{{$user->email}}">
                                </div>
                            </div>
                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                    </ul>
                                </div>
                            @endif
                        </div>

                        {{-- Информация о компании поставщика --}}
                        <div class="settings__company">
                            <p class="settings-title settings__company-title">Информация о компании</p>
                            <div class="settings__company-list">
                                <div class="form-group">
                                    <label class="settings__label settings__label--required">Название компании</label>
                                    <input class="input-main settings__input" name="company_name"
                                           value="{{$user->supplier->name ?? ''}}" type="text">
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Город</label>
                                    <div class="form-inline" style="position:relative">
                                        <input class="input-main settings__input" type="text" id="supplier_city_input"
                                               placeholder="Начните вводить город"
                                               value="{{ $user->supplier->city?->title ?? '' }}" autocomplete="off">
                                        <input type="hidden" name="city_id" id="supplier_city_id" value="{{ $user->supplier->city_id ?? '' }}">
                                        <ul id="supplier_city_suggestions" class="drop-list" style="position:absolute; left:0; right:0; top:100%; z-index:10; background:#fff; border:1px solid #ddd; border-radius:4px; display:none; max-height:220px; overflow:auto;">
                                        </ul>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">ИНН</label>
                                    <input class="input-main settings__input" name="inn" id="inn"
                                           value="{{$user->supplier->inn ?? ''}}" type="text" maxlength="12">
                                    <div id="inn-error" class="text-danger" style="display: none; color: red; font-size: 12px; margin-top: 5px;"></div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">ОГРН</label>
                                    <input class="input-main settings__input" name="ogrn" id="ogrn"
                                           value="{{$user->supplier->ogrn ?? ''}}" type="text" maxlength="15">
                                    <div id="ogrn-error" class="text-danger" style="display: none; color: red; font-size: 12px; margin-top: 5px;"></div>
                                </div>

                                <div class="form-group" style="margin-top:10px">
                                    <label class="settings__label">Адрес</label>
                                    <textarea class="input-main settings__input" name="address" rows="3"
                                              placeholder="Введите адрес компании">{{$user->supplier->address ?? ''}}</textarea>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Контактное лицо</label>
                                    <input class="input-main settings__input" name="contact_person"
                                           value="{{$user->supplier->contact_person ?? ''}}" type="text">
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Телефон</label>
                                    <div class="form-inline">
                                        <input class="input-main settings__input" id="phone" placeholder="+7 (XXX) XXX-XX-XX" name="phone"
                                               value="{{$user->supplier->phone ?? ''}}" type="text">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Дополнительный телефон</label>
                                    <div class="form-inline">
                                        <input class="input-main settings__input" id="phone_additional" placeholder="+7 (XXX) XXX-XX-XX" name="phone_additional"
                                               value="{{$user->supplier->phone_additional ?? ''}}" type="text">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Email компании</label>
                                    <div class="form-inline">
                                        <input class="input-main settings__input" name="company_email"
                                               value="{{$user->supplier->email ?? ''}}" type="email">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Веб-сайт</label>
                                    <div class="form-inline">
                                        <input class="input-main settings__input" name="website"
                                               value="{{$user->supplier->website ?? ''}}" type="url" placeholder="https://ваш-сайт.рф">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">WhatsApp</label>
                                    <div class="form-inline">
                                        <input class="input-main settings__input" name="whatsapp"
                                               value="{{$user->supplier->whatsapp ?? ''}}" type="text" placeholder="+7 (XXX) XXX-XX-XX">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="settings__label">Telegram</label>
                                    <div class="form-inline">
                                        <input class="input-main settings__input" name="telegram"
                                               value="{{$user->supplier->telegram ?? ''}}" type="text" placeholder="@username">
                                    </div>
                                </div>

                                <label class="settings__label" style="font-size: 20px">Описание компании</label>
                                <div class="form-group" style="margin-top: 10px">
                                    <textarea class="form__textarea settings__textarea" name="description" wrap="soft"
                                              placeholder="Расскажите о вашей компании, услугах и преимуществах">{{$user->supplier->description ?? ''}}</textarea>
                                </div>
                            </div>
                        </div>

                        {{-- Фото профиля --}}
                        <div class="settings__photo" style="display: flex; flex-direction: column;">
                            <div class="card-body">
                                <div class="row" style="display: flex; justify-content: space-between; max-width: 450px;">
                                    <!-- Фото профиля -->
                                    <div class="col-lg-4 col-sm-12 ddrop" style="">
                                        <p class="settings-title settings__geography-title">Фото профиля</p>
                                        <input type="file" name="image" class="dropify" data-default-file="{{ $user->image ? user_image_url($user->image) : '' }}"
                                               data-height="180" accept=".jpg, .jpeg, .png"/>
                                        @error('image')
                                        <span style="color: red">*Загрузите изображение</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="settings__save">
                            <button class="btn-main settings__btn settings__save-btn" style="height: max-content">Сохранить</button>
                        </div>
                    </form>

                    {{-- <div class="supplier-dashboard" style="margin-top: 40px;">
                        <h2 class="settings-title">Панель управления поставщика</h2>

                        <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
                            <div class="stat-card" style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                <div style="display: flex; align-items: center;">
                                    <div style="background: #217b00; color: white; width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <i class="fa fa-cube"></i>
                                    </div>
                                    <div>
                                        <h3 style="margin: 0; font-size: 24px; color: #333;">{{ $user->supplier->products()->count() }}</h3>
                                        <p style="margin: 0; color: #666;">Всего товаров</p>
                                    </div>
                                </div>
                            </div>

                            <div class="stat-card" style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                <div style="display: flex; align-items: center;">
                                    <div style="background: #28a745; color: white; width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <i class="fa fa-check-circle"></i>
                                    </div>
                                    <div>
                                        <h3 style="margin: 0; font-size: 24px; color: #333;">{{ $user->supplier->products()->where('quantity', '>', 0)->count() }}</h3>
                                        <p style="margin: 0; color: #666;">В наличии</p>
                                    </div>
                                </div>
                            </div>

                            <div class="stat-card" style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                <div style="display: flex; align-items: center;">
                                    <div style="background: #007bff; color: white; width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <i class="fa fa-upload"></i>
                                    </div>
                                    <div>
                                        <h3 style="margin: 0; font-size: 24px; color: #333;">{{ $user->supplier->importHistories()->count() }}</h3>
                                        <p style="margin: 0; color: #666;">Импортов</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="quick-actions" style="background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 30px;">
                            <h3 style="margin-bottom: 20px; color: #333;">Быстрые действия</h3>
                            <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                                <button class="btn-main" id="upload-price-btn" style="display: flex; align-items: center; gap: 8px;">
                                    <i class="fa fa-upload"></i>
                                    Загрузить прайс-лист
                                </button>
                                <a href="{{ route('supplier.products') }}" class="btn-main" style="display: flex; align-items: center; gap: 8px; text-decoration: none; background: #6c757d;">
                                    <i class="fa fa-list"></i>
                                    Управление товарами
                                </a>
                                <a href="{{ route('supplier.imports') }}" class="btn-main" style="display: flex; align-items: center; gap: 8px; text-decoration: none; background: #17a2b8;">
                                    <i class="fa fa-history"></i>
                                    История импортов
                                </a>
                            </div>
                        </div>

                        @if($user->supplier->importHistories()->count() > 0)
                        <div class="recent-imports" style="background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                            <h3 style="margin-bottom: 20px; color: #333;">Последние импорты</h3>
                            <div class="table-responsive">
                                <table style="width: 100%; border-collapse: collapse;">
                                    <thead>
                                        <tr style="background: #f8f9fa;">
                                            <th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">Файл</th>
                                            <th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">Статус</th>
                                            <th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">Товаров</th>
                                            <th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">Дата</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($user->supplier->importHistories()->latest()->limit(5)->get() as $import)
                                        <tr>
                                            <td style="padding: 12px; border-bottom: 1px solid #dee2e6;">{{ $import->filename }}</td>
                                            <td style="padding: 12px; border-bottom: 1px solid #dee2e6;">
                                                <span class="status-badge" style="padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold;
                                                    @if($import->status === 'completed') background: #d4edda; color: #155724;
                                                    @elseif($import->status === 'failed') background: #f8d7da; color: #721c24;
                                                    @else background: #fff3cd; color: #856404; @endif">
                                                    @switch($import->status)
                                                        @case('completed') Завершен @break
                                                        @case('failed') Ошибка @break
                                                        @case('pending') Ожидание @break
                                                        @default {{ $import->status }}
                                                    @endswitch
                                                </span>
                                            </td>
                                            <td style="padding: 12px; border-bottom: 1px solid #dee2e6;">{{ $import->created_count + $import->updated_count }}</td>
                                            <td style="padding: 12px; border-bottom: 1px solid #dee2e6;">{{ $import->created_at->format('d.m.Y H:i') }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endif
                    </div> --}}
                </div>
            </div>
        </div>
    </section>

    <!-- Upload Modal -->
    <div class="modal" id="uploadModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);">
        <div class="modal-dialog" style="position: relative; margin: 10% auto; padding: 20px; width: 80%; max-width: 500px; background: white; border-radius: 8px;">
            <span class="close" style="color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
            <h3 style="margin-top: 0;">Загрузить прайс-лист</h3>
            <form id="upload-form" enctype="multipart/form-data">
                @csrf
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px;">Выберите файл (Excel/CSV):</label>
                    <input type="file" name="import_file" accept=".xlsx,.xls,.csv" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>

                <div style="margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px;">
                    <p style="margin: 0 0 10px 0; font-weight: bold;">📥 Нужен шаблон?</p>
                    <a href="{{ route('supplier.template.download') }}" class="btn-main" style="text-decoration: none; display: inline-block; padding: 8px 16px; font-size: 14px;height: max-content;">
                        <i class="fa fa-download"></i>
                        Скачать шаблон Excel
                    </a>
                    <p style="margin: 10px 0 0 0; font-size: 12px; color: #666;">
                        Скачайте шаблон с примерами данных и правильными заголовками колонок
                    </p>
                </div>
                <div style="text-align: right;">
                    <button type="button" id="cancel-upload" style="background: #6c757d; color: white; border: none; padding: 10px 20px; margin-right: 10px; border-radius: 4px; cursor: pointer;">Отмена</button>
                    <button type="submit" style="background: #217b00; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">Загрузить</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Preview Modal -->
    <div class="modal" id="preview-modal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);">
        <div class="modal-dialog" style="position: relative; margin: 2% auto; padding: 20px; width: 95%; max-width: 1200px; background: white; border-radius: 8px; max-height: 90vh; overflow-y: auto;">
            <span class="close" id="close-preview" style="color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
            <h3 style="margin-top: 0;">Предварительный просмотр импорта</h3>

            <div id="preview-content">
                <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 style="margin-top: 20px; text-align: right;">
                <button type="button" id="cancel-preview" style="background: #6c757d; color: white; border: none; padding: 10px 20px; margin-right: 10px; border-radius: 4px; cursor: pointer;">Отмена</button>
                <button type="button" id="confirm-import" style="background: #217b00; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; display: none;">Импортировать</button>
            </div>
        </div>
    </div>
</main>

<style>
.settings__links-url--active {
    color: #217b00 !important;
    font-weight: bold;
}

.settings__links-url--active::before {
    content: "▶ ";
    color: #217b00;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.9/jquery.inputmask.min.js" integrity="sha512-F5Ul1uuyFlGnIT1dk2c4kB4DBdi5wnBJjVhL7gQlGh46Xn0VhvD8kgxLtjdZ5YN83gybk/aASUAlpdoWUjRR3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function () {
        Inputmask({
            mask: "+7 (999) 999-99-99",
            placeholder: "_",
            showMaskOnHover: false,
            clearIncomplete: true, // Поле не отправится, если не заполнено полностью
        }).mask("#phone");

        Inputmask({
            mask: "+7 (999) 999-99-99",
            placeholder: "_",
            showMaskOnHover: false,
            clearIncomplete: true,
        }).mask("#phone_additional");
    });
</script>
<script>
// Автоподгрузка городов для поставщика
document.addEventListener('DOMContentLoaded', function(){
    const input = document.getElementById('supplier_city_input');
    const hiddenId = document.getElementById('supplier_city_id');
    const list = document.getElementById('supplier_city_suggestions');
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    let timer = null;

    function fetchCities(value=''){
        fetch('{{ route('loadMoreCities') }}', {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRF-TOKEN':csrf},
            body: JSON.stringify({value})
        })
        .then(r=>r.json())
        .then(d=>{
            list.innerHTML='';
            if(!d.cities || !d.cities.length){ list.style.display='none'; return; }
            list.style.display='block';
            d.cities.forEach(c=>{
                const li=document.createElement('li');
                li.textContent=c.title;
                li.style.padding='8px 10px';
                li.style.cursor='pointer';
                li.onclick=()=>{ input.value=c.title; hiddenId.value=c.id; list.style.display='none'; };
                list.appendChild(li);
            });
        })
        .catch(console.error);
    }

    if(input){
        input.addEventListener('input', ()=>{
            const v=input.value.trim();
            hiddenId.value='';
            clearTimeout(timer);
            if(!v){ list.style.display='none'; return; }
            timer=setTimeout(()=>fetchCities(v), 400);
        });

        document.addEventListener('click', (e)=>{
            if(!e.target.closest('#supplier_city_input') && !e.target.closest('#supplier_city_suggestions')){
                list.style.display='none';
            }
        });
    }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadBtn = document.getElementById('upload-price-btn');
    const uploadModal = document.getElementById('uploadModal');
    const uploadForm = document.getElementById('upload-form');
    const closeBtn = uploadModal.querySelector('.close');
    const cancelBtn = document.getElementById('cancel-upload');

    uploadBtn.addEventListener('click', function() {
        uploadModal.style.display = 'block';
    });

    closeBtn.addEventListener('click', function() {
        uploadModal.style.display = 'none';
    });

    cancelBtn.addEventListener('click', function() {
        uploadModal.style.display = 'none';
    });

    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const fileInput = this.querySelector('input[type="file"]');
        const file = fileInput.files[0];

        if (!file) {
            alert('Выберите файл для загрузки');
            return;
        }

        // Показываем предварительный просмотр
        showPreview(file);
    });

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

        previewModal.style.display = 'block';

        // Показываем загрузку
        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>
        `;

        // Создаем FormData для предварительного просмотра
        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(response => response.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: 50px; color: #dc3545;">
                        <i class="fa fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 15px;"></i>
                        <h3>Ошибка анализа файла</h3>
                        <p>${data.message}</p>
                        <button onclick="document.getElementById('preview-modal').style.display='none'"
                                style="background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 15px;">
                            Закрыть
                        </button>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            previewContent.innerHTML = `
                <div style="text-align: center; padding: 50px; color: #dc3545;">
                    <i class="fa fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 15px;"></i>
                    <h3>Ошибка загрузки</h3>
                    <p>Не удалось проанализировать файл: ${error.message}</p>
                    <button onclick="document.getElementById('preview-modal').style.display='none'"
                            style="background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 15px;">
                        Закрыть
                    </button>
                </div>
            `;
        });
    }

    function showPreviewData(preview) {
        const previewContent = document.getElementById('preview-content');

        previewContent.innerHTML = `
            <div style="margin-bottom: 20px;">
                <h4>📊 Статистика файла</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>📋 Примеры данных (первые 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(value =>
                                            `<td style="padding: 8px; border: 1px solid #ddd; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;">${value || '-'}</td>`
                                        ).join('')}
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            ` : ''}

            ${preview.errors_list && preview.errors_list.length > 0 ? `
                <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(error =>
                                `<li style="margin-bottom: 5px; color: #c53030;">${error}</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 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}%)`;
                    }

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

                        // Импорт завершен успешно
                        loadingDiv.innerHTML = `
                            <i class="fa fa-check-circle" style="font-size: 24px; color: #28a745; margin-bottom: 10px;"></i>
                            <p style="margin: 0; color: #28a745; font-weight: 500;">Импорт завершен успешно!</p>
                            <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">Обработано строк: ${importData.processed_rows}</p>
                            <div style="margin-top: 10px; padding: 10px; background: #e8f5e8; border-radius: 4px; font-size: 12px;">
                                <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>
                        `;

                        // Автоматически закрываем модальное окно через 3 секунды
                        setTimeout(() => {
                            if (previewModal) {
                                previewModal.style.display = 'none';
                            }
                            window.location.reload();
                        }, 3000);
                    } else if (importData.status === 'failed') {
                        // Останавливаем polling
                        isPollingStopped = true;

                        // Импорт завершился с ошибкой
                        loadingDiv.innerHTML = `
                            <i class="fa fa-exclamation-triangle" style="font-size: 24px; color: #dc3545; margin-bottom: 10px;"></i>
                            <p style="margin: 0; color: #dc3545; font-weight: 500;">Импорт завершился с ошибкой</p>
                            <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">Проверьте детали в разделе "Импорты"</p>
                        `;

                        // Показываем кнопку "Закрыть"
                        const closeBtn = document.createElement('button');
                        closeBtn.textContent = 'Закрыть';
                        closeBtn.style.cssText = 'background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 10px;';
                        closeBtn.onclick = () => {
                            if (previewModal) {
                                previewModal.style.display = 'none';
                            }
                            window.location.reload();
                        };
                        loadingDiv.appendChild(closeBtn);
                    } 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 previewModal = document.getElementById('preview-modal');
        const confirmBtn = document.getElementById('confirm-import');

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

        // Создаем прелоадер
        const loadingDiv = document.createElement('div');
        loadingDiv.id = 'import-loading';
        loadingDiv.style.cssText = 'text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px; margin-top: 20px;';
        loadingDiv.innerHTML = `
            <i class="fa fa-spinner fa-spin" style="font-size: 24px; color: #666; margin-bottom: 10px;"></i>
            <p style="margin: 0; color: #666; font-weight: 500;">Импортируем прайс-лист...</p>
            <p style="margin: 5px 0 0 0; color: #999; font-size: 14px;">Можно закрыть окно, импорт продолжится в фоне</p>
        `;

        // Вставляем прелоадер после кнопок
        const buttonsContainer = confirmBtn.parentElement;
        buttonsContainer.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(response => response.json())
        .then(data => {
            if (data.success) {
                // Показываем успешное сообщение
                const isAsync = data.message.includes('фоне');

                // Если импорт запущен в фоне и есть import_id, начинаем отслеживание статуса
                if (isAsync && data.import_id) {
                    // Показываем сообщение о запуске
                    loadingDiv.innerHTML = `
                        <i class="fa fa-spinner fa-spin" style="font-size: 24px; color: #666; margin-bottom: 10px;"></i>
                        <p style="margin: 0; color: #666; font-weight: 500;">Импортируем прайс-лист...</p>
                        <p style="margin: 5px 0 0 0; color: #999; font-size: 14px;">Можно закрыть окно, импорт продолжится в фоне</p>
                        <p id="import-progress" style="margin: 10px 0 0 0; color: #666; font-size: 12px;"></p>
                    `;

                    // Запускаем polling для отслеживания статуса
                    startImportStatusPolling(data.import_id, loadingDiv, previewModal);
                } else {
                    // Синхронный импорт - показываем результат сразу
                    loadingDiv.innerHTML = `
                        <i class="fa fa-check-circle" style="font-size: 24px; color: #28a745; margin-bottom: 10px;"></i>
                        <p style="margin: 0; color: #28a745; font-weight: 500;">Импорт завершен успешно!</p>
                        <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">${data.message}</p>
                        ${data.stats ? `
                            <div style="margin-top: 10px; padding: 10px; background: #e8f5e8; border-radius: 4px; font-size: 12px;">
                                <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(() => {
                        previewModal.style.display = 'none';
                        window.location.reload();
                    }, 3000);
                }
            } else {
                // Показываем ошибку
                loadingDiv.innerHTML = `
                    <i class="fa fa-exclamation-triangle" style="font-size: 24px; color: #dc3545; margin-bottom: 10px;"></i>
                    <p style="margin: 0; color: #dc3545; font-weight: 500;">Ошибка импорта</p>
                    <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">${data.message}</p>
                `;

                // Показываем кнопку "Закрыть"
                const closeBtn = document.createElement('button');
                closeBtn.textContent = 'Закрыть';
                closeBtn.style.cssText = 'background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 10px;';
                closeBtn.onclick = () => {
                    previewModal.style.display = 'none';
                    window.location.reload();
                };
                loadingDiv.appendChild(closeBtn);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // Показываем ошибку
            loadingDiv.innerHTML = `
                <i class="fa fa-exclamation-triangle" style="font-size: 24px; color: #dc3545; margin-bottom: 10px;"></i>
                <p style="margin: 0; color: #dc3545; font-weight: 500;">Ошибка импорта</p>
                <p style="margin: 5px 0 0 0; color: #666; font-size: 14px;">Произошла ошибка при импорте: ${error.message}</p>
            `;

            // Показываем кнопку "Закрыть"
            const closeBtn = document.createElement('button');
            closeBtn.textContent = 'Закрыть';
            closeBtn.style.cssText = 'background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 10px;';
            closeBtn.onclick = () => {
                previewModal.style.display = 'none';
                window.location.reload();
            };
            loadingDiv.appendChild(closeBtn);
        });
    }

    // Preview modal controls
    document.getElementById('close-preview').addEventListener('click', function() {
        document.getElementById('preview-modal').style.display = 'none';
    });

    document.getElementById('cancel-preview').addEventListener('click', function() {
        document.getElementById('preview-modal').style.display = 'none';
    });
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const filterButton = document.querySelector('.settings-menu__btn');
        const asideFilter = document.querySelector('.settings__inner-aside');

        filterButton.addEventListener('click', function () {
            asideFilter.classList.toggle('show-mobile');
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        // Получаем все ссылки
        const links = document.querySelectorAll('.settings__links-url');

        // Обработчик клика для каждой ссылки
        links.forEach(link => {
            link.addEventListener('click', function () {
                // Удаляем активный класс у всех ссылок
                links.forEach(item => {
                    item.classList.remove('settings__links-url--active');
                });

                // Добавляем активный класс к текущей ссылке
                this.classList.add('settings__links-url--active');
            });
        });

        // Проверяем, какая ссылка активна при загрузке страницы
        const currentRoute = window.location.pathname.split('/').pop(); // Получаем текущий маршрут
        links.forEach(link => {
            if (link.getAttribute('href').includes(currentRoute)) {
                link.classList.add('settings__links-url--active');
            }
        });
    });
</script>

<style>
    textarea {
        white-space: pre-wrap; /* Сохраняет пробелы и переносы строк */
        word-wrap: break-word; /* Переносит длинные слова */
        overflow-wrap: break-word; /* Дополнительная поддержка переноса */
        resize: vertical; /* Ограничивает изменение размера только по вертикали */
        height: 200px; /* Задайте желаемую высоту */
    }

    .profile__navigation-item--active .profile__navigation-link {
        color: #217b00; /* Устанавливаем зеленый цвет для активной ссылки */
    }

    /* Переопределение стилей для Dropify */
    .dropify-wrapper .dropify-message,
    .dropify-wrapper .dropify-message p {
        color: white;
        font-size: 18px; /* Установите желаемый размер шрифта */
    }

    .dropify-wrapper .dropify-errors-container .dropify-error {
        font-size: 18px; /* Установите размер шрифта для сообщения об ошибке */
    }
    .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos{
        position: absolute;
    }
    .dropify-render img{
        max-height: 177px;
    width: 100%;
    }
    .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner{
        padding: unset !important;
    }
    @media (max-width: 530px) {
        .ddrop{
            width: 100%
        }
        .dropify-wrapper.touch-fallback .dropify-preview {
            height: unset;
        }
        .dropify-wrapper .dropify-preview .dropify-render img{
            height: unset !important;
            max-height: unset !important;
        }
        .dropify-wrapper.touch-fallback{
            height: unset !important;
        }
    }

    /* Адаптивные стили для мобильных устройств */
    @media (max-width: 768px) {
        /* Адаптация формы */
        .settings__main {
            padding: 15px !important;
        }

        .settings__user, .settings__company {
            margin-bottom: 25px;
        }

        .settings__user-header, .settings__company-title {
            font-size: 18px !important;
            margin-bottom: 15px !important;
        }

        .form-group {
            margin-bottom: 15px !important;
        }

        .settings__label {
            font-size: 14px !important;
            margin-bottom: 8px !important;
        }

        .input-main, .settings__input {
            padding: 12px !important;
            font-size: 14px !important;
        }

        .form__textarea, .settings__textarea {
            height: 120px !important;
            font-size: 14px !important;
        }

        .settings__save {
            margin-top: 20px !important;
        }

        .settings__save-btn {
            width: 100% !important;
            padding: 12px 20px !important;
            font-size: 16px !important;
        }

        /* Адаптация панели управления */
        .supplier-dashboard {
            margin-top: 30px !important;
        }

        .supplier-dashboard h2 {
            font-size: 20px !important;
            margin-bottom: 20px !important;
        }

        /* Адаптация статистики */
        .stats-grid {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
            margin-bottom: 25px !important;
        }

        .stat-card {
            padding: 15px !important;
        }

        .stat-card h3 {
            font-size: 20px !important;
        }

        .stat-card p {
            font-size: 13px !important;
        }

        .stat-card > div > div:first-child {
            width: 40px !important;
            height: 40px !important;
            margin-right: 12px !important;
        }

        .stat-card > div > div:first-child i {
            font-size: 18px !important;
        }

        /* Адаптация быстрых действий */
        .quick-actions {
            padding: 20px !important;
            margin-bottom: 25px !important;
        }

        .quick-actions h3 {
            font-size: 18px !important;
            margin-bottom: 15px !important;
        }

        .quick-actions > div {
            flex-direction: column !important;
            gap: 10px !important;
        }

        .quick-actions .btn-main {
            width: 100% !important;
            padding: 10px 15px !important;
            font-size: 14px !important;
            justify-content: center !important;
        }

        .quick-actions .btn-main i {
            font-size: 14px !important;
        }

        /* Адаптация таблицы импортов */
        .recent-imports {
            padding: 20px !important;
        }

        .recent-imports h3 {
            font-size: 18px !important;
            margin-bottom: 15px !important;
        }

        .table-responsive {
            overflow-x: auto !important;
        }

        .table th, .table td {
            padding: 8px !important;
            font-size: 12px !important;
        }

        .status-badge {
            padding: 3px 8px !important;
            font-size: 10px !important;
        }

        /* Адаптация модальных окон */
        .modal-dialog {
            margin: 5% auto !important;
            width: 95% !important;
            max-width: none !important;
        }

        .modal-header h3, .modal-header h5 {
            font-size: 18px !important;
        }

        .modal-body {
            padding: 15px !important;
        }

        .modal-footer {
            padding: 15px !important;
        }

        .modal-footer button {
            padding: 8px 16px !important;
            font-size: 14px !important;
        }

        /* Адаптация навигации */
        .settings-menu__btn {
            padding: 16px 30px !important;
            font-size: 14px !important;
        }

        .settings__inner-aside {
            padding: 15px !important;
        }

        .settings__links-title {
            font-size: 16px !important;
            margin-bottom: 10px !important;
        }

        .settings__links-url {
            font-size: 14px !important;
            padding: 8px 0 !important;
        }

        /* Адаптация Dropify для мобильных */
        /* .dropify-wrapper {
            height: 120px !important;
        } */

        .dropify-wrapper .dropify-message,
        .dropify-wrapper .dropify-message p {
            font-size: 14px !important;
        }

        .dropify-wrapper .dropify-errors-container .dropify-error {
            font-size: 12px !important;
        }

        .dropify-wrapper .dropify-preview {
            /* height: 120px !important; */
        }

        .dropify-wrapper .dropify-preview .dropify-render img {
            /* max-height: 120px !important; */
            width: 100%;
            object-fit: cover
        }
    }

    /* Дополнительная адаптация для очень маленьких экранов */
    @media (max-width: 480px) {
        .container {
            padding: 10px !important;
        }

        .settings__main {
            padding: 10px !important;
        }

        .stat-card {
            padding: 12px !important;
        }

        .stat-card h3 {
            font-size: 18px !important;
        }

        .quick-actions {
            padding: 15px !important;
        }

        .quick-actions .btn-main {
            padding: 8px 12px !important;
            font-size: 13px !important;
        }

        .table th, .table td {
            padding: 6px !important;
            font-size: 11px !important;
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Валидация ИНН
    const innInput = document.getElementById('inn');
    const innError = document.getElementById('inn-error');
    if(innInput){
        innInput.addEventListener('input', function(e) {
            e.target.value = e.target.value.replace(/\D/g, '').substring(0, 12);
            validateINN();
        });

        innInput.addEventListener('blur', function(e) {
            validateINN();
        });
    }

    // Валидация ОГРН
    const ogrnInput = document.getElementById('ogrn');
    const ogrnError = document.getElementById('ogrn-error');
    if(ogrnInput){
        ogrnInput.addEventListener('input', function(e) {
            e.target.value = e.target.value.replace(/\D/g, '').substring(0, 15);
            validateOGRN();
        });

        ogrnInput.addEventListener('blur', function(e) {
            validateOGRN();
        });
    }

    // Функция валидации ИНН
    function validateINN() {
        const value = innInput.value.trim();
        const innError = document.getElementById('inn-error');

        if (value === '') {
            innError.style.display = 'none';
            innError.textContent = '';
            return true;
        }

        if (!/^\d+$/.test(value)) {
            innError.style.display = 'block';
            innError.textContent = 'ИНН должен содержать только цифры';
            return false;
        }

        if (value.length !== 10 && value.length !== 12) {
            innError.style.display = 'block';
            innError.textContent = 'ИНН должен содержать 10 цифр (для ООО) или 12 цифр (для ИП)';
            return false;
        }

        innError.style.display = 'none';
        innError.textContent = '';
        return true;
    }

    // Функция валидации ОГРН
    function validateOGRN() {
        const value = ogrnInput.value.trim();
        const ogrnError = document.getElementById('ogrn-error');

        if (value === '') {
            ogrnError.style.display = 'none';
            ogrnError.textContent = '';
            return true;
        }

        if (!/^\d+$/.test(value)) {
            ogrnError.style.display = 'block';
            ogrnError.textContent = 'ОГРН должен содержать только цифры';
            return false;
        }

        if (value.length !== 13 && value.length !== 15) {
            ogrnError.style.display = 'block';
            ogrnError.textContent = 'ОГРН должен содержать 13 цифр (для ООО) или 15 цифр (для ИП)';
            return false;
        }

        ogrnError.style.display = 'none';
        ogrnError.textContent = '';
        return true;
    }

    // Валидация при отправке формы
    const form = document.querySelector('form[action="{{ route("supplier.updateProfile") }}"]');
    if(form){
        form.addEventListener('submit', function(e) {
            let isValid = true;

            // Валидация ИНН
            if (innInput && !validateINN()) {
                isValid = false;
            }

            // Валидация ОГРН
            if (ogrnInput && !validateOGRN()) {
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
                return false;
            }
        });
    }
});
</script>

@endsection