@extends('app')
@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" style="position: relative">
                    <h1 class="settings-title" style="margin-bottom: 24px;">Цены</h1>
                    <button class="btn-main" id="openPriceModal" style="margin-bottom: 24px;">Создание цены</button>
                    <div class="settings__block2">
                        <table class="settings__price-table" style="width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;">
                            <thead>
                            <tr>
                                <th style="padding: 10px 12px; min-width: 120px;">Название</th>
                                <th style="padding: 10px 12px; min-width: 100px;">Текущая цена</th>
                                <th style="padding: 10px 12px; min-width: 90px;">Артикул системы</th>
                                <th style="padding: 10px 12px; min-width: 110px;">Доступность</th>
                                <th style="padding: 10px 12px; min-width: 110px;">Категория</th>
                                <th style="padding: 10px 12px; min-width: 90px;">Бренд</th>
                                <th style="padding: 10px 12px; min-width: 80px;">Цвет</th>
                                <th style="padding: 10px 12px; min-width: 100px;">Материал</th>
                                <th style="padding: 10px 12px; min-width: 110px;">Размеры</th>
                                <th style="padding: 10px 12px; min-width: 80px;">Ед. изм.</th>
                                <th style="padding: 10px 12px; min-width: 90px;">Город</th>
                                <th style="padding: 10px 12px; min-width: 90px;">Дата</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($prices as $price)
                                <tr>
                                    <td style="padding: 10px 12px;">{{ $price->title }}</td>
                                    <td style="padding: 10px 12px;">{{ number_format($price->price, 0, '.', ' ') }} руб.</td>
                                    <td style="padding: 10px 12px;">{{ $price->sku ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->availability ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->category ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->brand ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->color ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->material ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->dimensions ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->unit ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->city ?? '' }}</td>
                                    <td style="padding: 10px 12px;">{{ $price->created_at ? $price->created_at->format('d.m.Y') : '' }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="12" style="padding:10px 12px; color:#888;">Нет добавленных цен</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Модалка -->
    <div id="priceModal" class="modal__wrapper3 custom" style="display:none;">
        <div class="modal" style="min-height: unset;">
            <div class="modal__title">Загрузка Excel-файла с ценами</div>
            <form id="uploadExcelForm" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <div id="excelDropzone" class="dropzone input-main"></div>
                    <small style="color:#888;display:block;margin-top:8px;">Загрузите Excel-файл (.xls, .xlsx) с вашими товарами или услугами</small>
                </div>
                <div style="display:flex;gap:16px;margin-top:16px;">
                    <button type="submit" class="btn-main">Загрузить</button>
                    <button type="button" class="btn-outline" id="closePriceModal">Отмена</button>
                </div>
            </form>
        </div>
    </div>
</main>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script>
Dropzone.autoDiscover = false;
let excelDropzone = null;

document.getElementById('openPriceModal').onclick = function() {
    document.getElementById('priceModal').style.display = 'flex';
    if (!excelDropzone) {
        excelDropzone = new Dropzone("#excelDropzone", {
            url: '/upload-excel', // URL для отправки файла
            autoProcessQueue: false, // Не отправляем автоматически
            maxFiles: 1,
            acceptedFiles: '.xls,.xlsx',
            dictDefaultMessage: 'Перетащите Excel-файл сюда или нажмите для выбора',
            addRemoveLinks: true,
            clickable: true,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
    }
};

// Обработка отправки формы
document.getElementById('uploadExcelForm').addEventListener('submit', function(e) {
    e.preventDefault();

    if (excelDropzone && excelDropzone.files.length > 0) {
        // Показываем индикатор загрузки
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        submitBtn.textContent = 'Загрузка...';
        submitBtn.disabled = true;

        // Отправляем файл только при клике на кнопку
        excelDropzone.processQueue();

                // Обработка успешной загрузки
        excelDropzone.on('success', function(file, response) {
            if (response.success) {
                let message = 'Файл успешно обработан!\n';
                message += `Всего строк: ${response.data.total_rows}\n`;
                message += `Обработано: ${response.data.processed_rows}\n`;

                if (response.data.errors.length > 0) {
                    message += `\nОшибки:\n${response.data.errors.join('\n')}`;
                }

                if (response.data.items.length > 0) {
                    message += `\n\nПервые 3 записи:\n`;
                    response.data.items.slice(0, 3).forEach((item, index) => {
                        message += `${index + 1}. ${item.title} - ${item.price} руб.\n`;
                    });
                }

                alert(message);
            } else {
                alert('Ошибка: ' + response.message);
            }

            document.getElementById('priceModal').style.display = 'none';
            excelDropzone.removeAllFiles();
            submitBtn.textContent = originalText;
            submitBtn.disabled = false;
        });

        // Обработка ошибки
        excelDropzone.on('error', function(file, errorMessage) {
            alert('Ошибка при загрузке файла: ' + errorMessage);
            submitBtn.textContent = originalText;
            submitBtn.disabled = false;
        });
    } else {
        alert('Пожалуйста, выберите файл для загрузки');
    }
});

document.getElementById('closePriceModal').onclick = function() {
    document.getElementById('priceModal').style.display = 'none';
    if (excelDropzone) {
        excelDropzone.removeAllFiles();
    }
};

// Закрытие модалки по клику вне блока
const priceModal = document.getElementById('priceModal');
priceModal.addEventListener('mousedown', function(e) {
    if (e.target === priceModal) {
        priceModal.style.display = 'none';
        if (excelDropzone) {
            excelDropzone.removeAllFiles();
        }
    }
});
</script>

<style>
    .profile__navigation-item--active .profile__navigation-link {
        color: #217b00;
    }

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

        .settings__main {
            padding: 15px !important;
        }

        .settings-title {
            font-size: 20px !important;
            margin-bottom: 20px !important;
        }

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

        /* Адаптация таблицы */
        .settings__block2 {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .settings__price-table {
            min-width: 800px !important;
        }

        .settings__price-table th,
        .settings__price-table td {
            padding: 8px 6px !important;
            font-size: 12px !important;
            white-space: nowrap;
        }

        .settings__price-table th {
            background: #f8f9fa !important;
            font-weight: 600 !important;
        }

        /* Адаптация модального окна */
        .modal__wrapper3 {
            padding: 20px !important;
        }

        .modal {
            width: 95% !important;
            max-width: none !important;
            margin: 0 !important;
        }

        .modal__title {
            font-size: 18px !important;
            margin-bottom: 20px !important;
        }

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

        .dropzone {
            min-height: 120px !important;
            padding: 20px !important;
        }

        .dropzone .dz-message {
            font-size: 14px !important;
        }

        .btn-outline {
            width: 100% !important;
            margin-top: 10px !important;
        }

        /* Адаптация навигации */
        .settings-menu__btn {
            padding: 10px 15px !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;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 10px !important;
        }

        .settings__main {
            padding: 10px !important;
        }

        .settings__price-table th,
        .settings__price-table td {
            padding: 6px 4px !important;
            font-size: 11px !important;
        }

        .modal__wrapper3 {
            padding: 10px !important;
        }

        .modal__title {
            font-size: 16px !important;
        }

        .dropzone {
            min-height: 100px !important;
            padding: 15px !important;
        }

        .dropzone .dz-message {
            font-size: 13px !important;
        }
    }
</style>

@endsection