@extends('app')

@section('head')
<style>
    /* Специальные стили ТОЛЬКО для страницы товаров поставщика */
    .supplier-products-page { overflow-x: hidden; }
    .supplier-products-page .settings__main {
        width: 100% !important;
        min-width: 0;
    }

    .supplier-products-page .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .supplier-products-page table {
        width: 100% !important;
        border-collapse: collapse;
    }
    .supplier-products-page table thead th {
        text-align: center !important;
        white-space: nowrap;
    }
    .supplier-products-page table tbody td {
        text-align: center !important;
        vertical-align: middle;
    }
    .supplier-products-page table tbody td img {
        width: 100px !important;
        height: 100px;
        object-fit: cover;
        border-radius: 6px;
    }
    .supplier-products-page table tbody td:first-child {
        text-align: left !important;
    }
    .supplier-products-page table thead th:first-child {
        text-align: left !important;
    }

    /* Заголовок секции */
    @media (max-width: 970px) {
        .supplier-products-page .section_header_products {
            flex-direction: column;
            gap: 15px;
            align-items: flex-start;
        }
    }
    @media (max-width: 670px) {
        .supplier-products-page .section_header_products_buttons {
            flex-direction: column;
            width: 100%;
        }
        .supplier-products-page .bump-info { flex-wrap: wrap; }
    }

    /* Планшет: убираем наименее важные колонки, чтобы избежать горизонтального скролла */
    @media (max-width: 1024px) {
        /* Лента с информацией о поднятии не должна растягивать страницу */
        .supplier-products-page .bump-info { width: 100% !important; }

        .supplier-products-page table thead th.col-category,
        .supplier-products-page table thead th.col-created,
        .supplier-products-page table tbody td.col-category,
        .supplier-products-page table tbody td.col-created {
            display: none;
        }
    }

    /* Мобильная версия: превращаем таблицу в карточки */
    @media (max-width: 768px) {
        .supplier-products-page table {
            border: 0;
        }
        .supplier-products-page table thead {
            display: none;
        }
        .supplier-products-page table tbody,
        .supplier-products-page table tr,
        .supplier-products-page table td {
            display: block;
            width: 100%;
        }
        .supplier-products-page table tr {
            margin-bottom: 12px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
        }
        .supplier-products-page table td {
            padding: 10px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #f0f0f0;
        }
        .supplier-products-page table td:last-child {
            border-bottom: 0;
        }
        .supplier-products-page table td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #555;
            flex: 0 0 45%;
            text-align: left;
        }
        .supplier-products-page table td img {
            width: 64px !important;
            height: 64px;
        }
    }

    /* Мобильные и узкие экраны: фильтры в колонку без фиксированных min-width */
    @media (max-width: 768px) {
        .supplier-products-page .products-filters > div { flex-direction: column !important; gap: 10px !important; }
        .supplier-products-page #products-search,
        .supplier-products-page #category-filter,
        .supplier-products-page #apply-filters { min-width: 0 !important; width: 100% !important; }
        #deleteModal .modal-dialog{
            flex-direction: column
        }
    }
    @media (max-width: 1334px) {
        .products-management .bump-info {
            width: 100% !important;
            flex-direction: column;
        }
    }
    @media (max-width: 920px) {
        .bump-info-left{
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: baseline;
        }
        .products-management .bump-info {
            flex-direction: row;
            justify-content: space-between;
        }
        .bump-info-right{
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

    }
    @media (max-width: 438px) {
        .products-management .bump-info {
            justify-content: center;
        }
        .bump-info-right{
            flex-direction: row;
        }
    }

    /* Стили для кнопок модального окна пополнения */
    .topup-modal-buttons {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
    .btn-cancel {
        background: #6c757d;
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 4px;
        cursor: pointer;
    }
    .btn-submit {
        background: #217b00;
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 4px;
        cursor: pointer;
    }
    .delete-modal-buttons,
    .delete-confirmation-buttons {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
    .btn-delete {
        background: #dc3545;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }
    .btn-cancel-secondary {
        padding: 8px 16px;
        border: 1px solid #ddd;
        background: white;
        color: #333;
        cursor: pointer;
        border-radius: 4px;
    }

    /* Базовые стили для модальных окон */
    #topupModal .modal-dialog,
    #deleteModal .modal-dialog {
        position: relative;
        margin: 10% auto;
        padding: 20px;
        width: 90%;
        max-width: 520px;
        background: white;
        border-radius: 8px;
    }
    #delete-confirmation-modal > div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 30px;
        border-radius: 8px;
        max-width: 400px;
        width: 90%;
    }

    /* Мобильная стилизация модальных окон */
    @media (max-width: 768px) {
        /* Модальное окно пополнения баланса */
        #topupModal {
            padding: 10px !important;
        }
        #topupModal .modal-dialog {
            width: calc(100% - 20px) !important;
            max-width: none !important;
            margin: 20px auto !important;
            padding: 20px 15px !important;
            max-height: 500px !important;
            height: auto !important;
            overflow-y: auto !important;
            position: relative !important;
            top: auto !important;
            transform: none !important;
        }
        #topupModal .modal-dialog h3 {
            font-size: 18px !important;
            margin-bottom: 12px !important;
            word-wrap: break-word;
        }
        #topupModal .modal-dialog p {
            font-size: 14px !important;
            margin-bottom: 15px !important;
            line-height: 1.4;
            word-wrap: break-word;
        }
        #topupModal .modal-dialog input {
            width: 100% !important;
            padding: 12px !important;
            font-size: 16px !important;
            margin-bottom: 15px !important;
            box-sizing: border-box;
        }
        #topupModal .modal-dialog {
            display: flex !important;
            flex-direction: column !important;
        }
        #topupModal .modal-dialog > div:last-child,
        #topupModal .topup-modal-buttons {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
            margin-top: 10px !important;
        }
        #topupModal .modal-dialog button,
        #topupModal .btn-cancel,
        #topupModal .btn-submit,
        #topupModal #topupCancel,
        #topupModal #topupSubmit {
            width: 100% !important;
            max-width: 100% !important;
            padding: 10px 16px !important;
            font-size: 14px !important;
            margin: 0 !important;
            box-sizing: border-box;
            flex: 0 0 auto !important;
        }
        #topupModal .modal-dialog {
            position: relative !important;
        }
        #topupModal .modal-dialog {
            position: relative !important;
        }
        #topupModal .modal-dialog > div:first-child {
            display: block !important;
            margin-bottom: 15px !important;
            padding-right: 40px !important;
        }
        #topupModal .modal-dialog > div:first-child h3 {
            text-align: left !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        #topupClose {
            font-size: 24px !important;
            line-height: 1 !important;
            padding: 0 !important;
            width: 28px !important;
            height: 28px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: right !important;
            position: absolute !important;
            top: 15px !important;
            right: 15px !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            color: #666 !important;
            z-index: 10 !important;
            margin: 0 !important;
        }

        /* Модальное окно подтверждения удаления всех товаров */
        #deleteModal {
            padding: 10px !important;
        }
        #deleteModal .modal-dialog {
            width: calc(100% - 20px) !important;
            max-width: none !important;
            margin: 20px auto !important;
            padding: 25px 20px !important;
            max-height: 500px !important;
            height: auto !important;
            overflow-y: auto !important;
            box-sizing: border-box;
            position: relative !important;
        }
        #deleteModal .modal-dialog h3 {
            font-size: 18px !important;
            margin-top: 0 !important;
            margin-bottom: 20px !important;
            padding-right: 40px !important;
            word-wrap: break-word;
            line-height: 1.4 !important;
        }
        #deleteModal .modal-dialog p {
            font-size: 14px !important;
            margin-bottom: 16px !important;
            line-height: 1.6 !important;
            word-wrap: break-word;
        }
        #deleteModal .modal-dialog input {
            width: 100% !important;
            padding: 12px !important;
            font-size: 16px !important;
            margin-bottom: 20px !important;
            box-sizing: border-box;
        }
        #deleteModal .modal-dialog > div:last-child,
        #deleteModal .delete-modal-buttons {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            text-align: left !important;
            width: 100% !important;
            justify-content: flex-start !important;
            margin-top: 15px !important;
        }
        #deleteModal .modal-dialog button[type="button"]:not(.btn-cancel):not(.btn-delete) {
            font-size: 24px !important;
            line-height: 1 !important;
            padding: 0 !important;
            width: 28px !important;
            height: 28px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: absolute !important;
            top: 15px !important;
            right: 15px !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            color: #666 !important;
            z-index: 10 !important;
            margin: 0 !important;
        }
        #deleteModal .modal-dialog .delete-modal-buttons button.btn-cancel,
        #deleteModal .modal-dialog .delete-modal-buttons button.btn-delete {
            width: 100% !important;
            max-width: 100% !important;
            padding: 12px 20px !important;
            font-size: 15px !important;
            margin: 0 !important;
            box-sizing: border-box;
            flex: 0 0 auto !important;
        }

        /* Модальное окно подтверждения удаления выбранных товаров */
        #delete-confirmation-modal {
            padding: 10px !important;
        }
        #delete-confirmation-modal > div {
            width: calc(100% - 20px) !important;
            max-width: none !important;
            padding: 20px 15px !important;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
            box-sizing: border-box;
            position: relative !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
            margin: auto !important;
        }
        #delete-confirmation-modal h3 {
            font-size: 18px !important;
            margin: 0 0 15px 0 !important;
            word-wrap: break-word;
        }
        #delete-confirmation-modal p {
            font-size: 14px !important;
            margin: 0 0 20px 0 !important;
            line-height: 1.5;
            word-wrap: break-word;
        }
        #delete-confirmation-modal > div > div:last-child,
        #delete-confirmation-modal .delete-confirmation-buttons {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            justify-content: flex-start !important;
            width: 100% !important;
            margin-top: 10px !important;
        }
        #delete-confirmation-modal button,
        #delete-confirmation-modal .btn-cancel-secondary,
        #delete-confirmation-modal .btn-delete {
            width: 100% !important;
            padding: 10px 16px !important;
            font-size: 14px !important;
            margin: 0 !important;
            box-sizing: border-box;
        }
    }
</style>
@endsection

@section('content')
<main>
    <div class="supplier-products-page">
    <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="products-management">
                        <div class="section-header section_header_products" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
                            <h2 class="settings-title" style="margin: 0;">Управление товарами</h2>
                            <div class="section_header_products_buttons" style="display: flex; gap: 10px;">
                                <button class="btn-main" id="delete-selected-products" style="background: #dc3545;height: max-content;line-height: 20px; display: none;">
                                    <i class="fa fa-trash"></i>
                                    Удалить выбранные
                                </button>
                                <button class="btn-main" id="delete-all-products" style="background: #dc3545;height: max-content;line-height: 20px;">
                                    <i class="fa fa-trash"></i>
                                    Удалить все товары
                                </button>
                            </div>
                        </div>
                        <div class="bump-info" style="display:flex; align-items:center; gap:12px; margin-right:8px; background:#fff; padding:8px 12px; border-radius:8px; border:1px solid #eee;width: max-content;">
                            <div class="bump-info-left">
                                <span>Товаров: <strong>{{ $bump['count'] ?? 0 }}</strong></span>
                                <span>Ставка: <strong>{{ number_format($bump['rate'] ?? 0, 2, ',', ' ') }} ₽/товар</strong></span>
                                <span>К оплате: <strong>{{ number_format($bump['total'] ?? 0, 2, ',', ' ') }} ₽</strong></span>
                                <span style="margin-left: 16px;">Ваш баланс: <strong id="supplier-balance">{{ number_format($user->balance ?? 0, 2, ',', ' ') }}</strong> ₽</span>
                            </div>
                            <div class="bump-info-right">
                                <button class="btn-main" id="supplier-topup" style="background:#217b00;height:max-content;line-height:20px;">Пополнить</button>
                                <button class="btn-main" id="bump-all" style="background:#ff9800;height:max-content;line-height:20px;" {{ ($bump['count'] ?? 0) == 0 ? 'disabled' : '' }}>Поднять</button>
                            </div>
                        </div>

                        <div class="products-filters" style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
                            <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                                <input type="text" id="products-search" placeholder="Поиск товаров..." class="input-main" style="flex: 1; min-width: 250px;">
                                <select id="category-filter" class="input-main" style="min-width: 200px;">
                                    <option value="">Все категории</option>
                                </select>
                                <button id="apply-filters" class="btn-main">Применить</button>
                            </div>
                        </div>

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

    <!-- Delete Confirmation Modal -->
    <div class="modal" id="deleteModal" 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">
            <button type="button" onclick="document.getElementById('deleteModal').style.display='none'" style="background: transparent; border: none; font-size: 22px; line-height: 1; cursor: pointer; position: absolute; top: 15px; right: 15px; z-index: 10; color: #666;">×</button>
            <h3 style="margin-top: 0; color: #dc3545;">Подтверждение удаления</h3>
            <p>Вы уверены, что хотите удалить ВСЕ товары? Это действие нельзя отменить.</p>
            <p>Для подтверждения введите: <strong>DELETE_ALL_PRODUCTS</strong></p>
            <input type="text" id="delete-confirmation" placeholder="DELETE_ALL_PRODUCTS" class="input-main">
            <div class="delete-modal-buttons">
                <button type="button" id="cancel-delete" class="btn-cancel">Отмена</button>
                <button type="button" id="confirm-delete" class="btn-delete">Удалить все</button>
            </div>
        </div>
    </div>
</main>

<!-- Top-up Modal -->
<div class="modal" id="topupModal" 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">
        <button type="button" id="topupClose" style="background: transparent; border: none; font-size: 22px; line-height: 1; cursor: pointer; position: absolute; top: 15px; right: 15px; z-index: 10;">×</button>
        <div style="margin-bottom:10px;">
            <h3 style="margin:0;">Пополнение баланса</h3>
        </div>
        <p id="topupHint" style="color:#555;margin:0 0 10px 0;">Укажите сумму пополнения.</p>
        <input type="number" id="supplier_topup_sum" class="input-main" placeholder="Сумма, ₽" min="1" step="1" style="width:100%;margin-bottom:12px;">
        <div class="topup-modal-buttons">
            <button type="button" id="topupCancel" class="btn-cancel">Отмена</button>
            <button type="button" id="topupSubmit" class="btn-submit">Оплатить</button>
        </div>
    </div>

</div>

<!-- Модалка подтверждения удаления -->
<div id="delete-confirmation-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000;">
    <div>
        <h3 style="margin: 0 0 15px 0; color: #dc3545;">⚠️ Подтверждение удаления</h3>
        <p id="delete-confirmation-text" style="margin: 0 0 20px 0; line-height: 1.5;"></p>
        <div class="delete-confirmation-buttons">
            <button id="delete-cancel-btn" class="btn-cancel-secondary">Отмена</button>
            <button id="delete-confirm-btn" class="btn-delete">Удалить</button>
        </div>
    </div>
</div>

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

    // Load products on page load
    loadProducts();

    // Search and filters
    document.getElementById('products-search').addEventListener('input', debounce(loadProducts, 500));
    document.getElementById('category-filter').addEventListener('change', loadProducts);
    document.getElementById('apply-filters').addEventListener('click', loadProducts);

    // Delete all products
    const deleteBtn = document.getElementById('delete-all-products');
    const bumpAllBtn = document.getElementById('bump-all');
    const supplierTopupBtn = document.getElementById('supplier-topup');
    const supplierBalanceEl = document.getElementById('supplier-balance');
    const deleteModal = document.getElementById('deleteModal');
    const cancelDelete = document.getElementById('cancel-delete');
    const confirmDelete = document.getElementById('confirm-delete');
    const deleteInput = document.getElementById('delete-confirmation');
    const topupModal = document.getElementById('topupModal');
    const topupClose = document.getElementById('topupClose');
    const topupCancel = document.getElementById('topupCancel');
    const topupSubmit = document.getElementById('topupSubmit');
    const topupSum = document.getElementById('supplier_topup_sum');
    const topupHint = document.getElementById('topupHint');

    deleteBtn.addEventListener('click', function() {
        deleteModal.style.display = 'block';
        deleteInput.value = '';
    });

    cancelDelete.addEventListener('click', function() {
        deleteModal.style.display = 'none';
    });

    confirmDelete.addEventListener('click', function() {
        const confirmation = deleteInput.value.trim();
        if (confirmation !== 'DELETE_ALL_PRODUCTS') {
            alert('Неверный текст подтверждения');
            return;
        }

        confirmDelete.disabled = true;
        confirmDelete.textContent = 'Удаляем...';

        fetch('{{ route("supplier.delete_all_products") }}', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                confirmation: 'DELETE_ALL_PRODUCTS'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Все товары удалены: ' + data.message);
                loadProducts();
                deleteModal.style.display = 'none';
            } else {
                alert('Ошибка удаления: ' + data.message);
            }
        })
        .catch(error => {
            alert('Произошла ошибка при удалении товаров');
            console.error('Error:', error);
        })
        .finally(() => {
            confirmDelete.disabled = false;
            confirmDelete.textContent = 'Удалить все';
        });
    });

    // Bump all products
    if (bumpAllBtn) {
        if ({{ $bump['count'] ?? 0 }} === 0) {
            bumpAllBtn.title = 'Нет товаров для поднятия';
        }
        bumpAllBtn.addEventListener('click', function() {
            bumpAllBtn.disabled = true;
            const prev = bumpAllBtn.textContent;
            bumpAllBtn.textContent = 'Поднимаем...';

            fetch('{{ route("supplier.products.bump_all") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    if (typeof data.new_balance !== 'undefined') {
                        supplierBalanceEl.textContent = new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(data.new_balance));
                    }
                    loadProducts();
                } else {
                    if (data && data.error_code === 'INSUFFICIENT_FUNDS') {
                        const need = Number(data.need || 0);
                        topupHint.textContent = 'Недостаточно средств. Рекомендуем пополнить на ' + need.toFixed(2) + ' ₽ или больше.';
                        topupSum.value = Math.ceil(need);
                        topupModal.style.display = 'block';
                    } else {
                        alert('Ошибка: ' + (data.message || 'Не удалось выполнить поднятие'));
                    }
                }
            })
            .catch(err => {
                console.error(err);
                alert('Произошла ошибка при поднятии товаров');
            })
            .finally(() => {
                bumpAllBtn.disabled = false;
                bumpAllBtn.textContent = prev;
            });
        });
    }

    // Top-up open/close
    function closeTopup() {
        topupModal.style.display = 'none';
    }
    supplierTopupBtn.addEventListener('click', function(){
        topupHint.textContent = 'Укажите сумму пополнения.';
        topupSum.value = '';
        topupModal.style.display = 'block';
    });
    topupClose.addEventListener('click', closeTopup);
    topupCancel.addEventListener('click', closeTopup);
    topupModal.addEventListener('click', function(e){ if (e.target === topupModal) closeTopup(); });

    // Top-up submit via Robokassa redirect
    topupSubmit.addEventListener('click', function(){
        const val = Number(topupSum.value || 0);
        if (!val || val <= 0) {
            alert('Введите корректную сумму');
            return;
        }
        // Create and submit form to server to build Robokassa redirect
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('robokassa.redirect') }}';

        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);

        const sum = document.createElement('input');
        sum.type = 'hidden';
        sum.name = 'sum';
        sum.value = String(val);
        form.appendChild(sum);

        document.body.appendChild(form);
        form.submit();
    });

    function loadProducts(page = 1) {
        const search = document.getElementById('products-search').value;
        const category = document.getElementById('category-filter').value;

        const params = new URLSearchParams({
            page: page,
            search: search,
            category: category,
            per_page: 20
        });

        fetch('{{ route("supplier.products.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('products-list').innerHTML = data.html;
                updatePagination(data.pagination);
                updateDeleteSelectedButton(); // Обновляем состояние кнопки после загрузки товаров
            } else {
                document.getElementById('products-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('products-list').innerHTML =
                '<div style="text-align: center; padding: 50px; color: #dc3545;"><i class="fa fa-exclamation-triangle"></i><p>Ошибка при загрузке товаров</p></div>';
        });
    }

    function updatePagination(pagination) {
        const current = pagination.current_page;
        const last = pagination.last_page;
        const maxButtons = 5;

        let paginationHtml = '';
        if (last > 1) {
            let start = Math.max(1, current - Math.floor(maxButtons / 2));
            let end = Math.min(last, start + maxButtons - 1);
            start = Math.max(1, end - maxButtons + 1);

            paginationHtml = '<div style="display: flex; justify-content: center; gap: 8px; align-items: center;">';

            // Prev
            const prevDisabled = current === 1 ? 'disabled' : '';
            paginationHtml += `<button ${prevDisabled} onclick="loadProducts(${current - 1})" style="padding: 8px 12px; border: 1px solid #ddd; background: white; color: #333; cursor: pointer; border-radius: 4px;">‹</button>`;

            // First + ellipsis
            if (start > 1) {
                paginationHtml += `<button onclick="loadProducts(1)" style="padding: 8px 12px; border: 1px solid #ddd; background: white; color: #333; cursor: pointer; border-radius: 4px;">1</button>`;
                if (start > 2) {
                    paginationHtml += `<span style="padding: 0 4px; color: #888;">…</span>`;
                }
            }

            // Window
            for (let i = start; i <= end; i++) {
                const isActive = i === current;
                paginationHtml += `<button onclick="loadProducts(${i})" style="padding: 8px 12px; border: 1px solid #ddd; background: ${isActive ? '#217b00' : 'white'}; color: ${isActive ? 'white' : '#333'}; cursor: pointer; border-radius: 4px;">${i}</button>`;
            }

            // Ellipsis + Last
            if (end < last) {
                if (end < last - 1) {
                    paginationHtml += `<span style="padding: 0 4px; color: #888;">…</span>`;
                }
                paginationHtml += `<button onclick="loadProducts(${last})" style="padding: 8px 12px; border: 1px solid #ddd; background: white; color: #333; cursor: pointer; border-radius: 4px;">${last}</button>`;
            }

            // Next
            const nextDisabled = current === last ? 'disabled' : '';
            paginationHtml += `<button ${nextDisabled} onclick="loadProducts(${current + 1})" style="padding: 8px 12px; border: 1px solid #ddd; background: white; color: #333; cursor: pointer; border-radius: 4px;">›</button>`;

            paginationHtml += '</div>';
        }
        document.getElementById('products-pagination').innerHTML = paginationHtml;
    }

    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // Make loadProducts global for pagination
    window.loadProducts = loadProducts;

    // Массовое удаление товаров

    // Обработчик для кнопки "Выбрать все"
    function handleSelectAll() {
        const checkboxes = document.querySelectorAll('.product-checkbox');
        const selectAllCheckbox = document.getElementById('select-all-products');
        const isChecked = selectAllCheckbox ? selectAllCheckbox.checked : false;

        checkboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });

        updateDeleteSelectedButton();
    }

    // Обработчик для отдельных чекбоксов
    function handleProductCheckbox() {
        const checkboxes = document.querySelectorAll('.product-checkbox');
        const checkedCount = document.querySelectorAll('.product-checkbox:checked').length;

        // Обновляем состояние "Выбрать все" только если элемент существует
        const selectAllCheckbox = document.getElementById('select-all-products');
        if (selectAllCheckbox) {
            if (checkedCount === 0) {
                selectAllCheckbox.indeterminate = false;
                selectAllCheckbox.checked = false;
            } else if (checkedCount === checkboxes.length) {
                selectAllCheckbox.indeterminate = false;
                selectAllCheckbox.checked = true;
            } else {
                selectAllCheckbox.indeterminate = true;
                selectAllCheckbox.checked = false;
            }
        }

        updateDeleteSelectedButton();
    }

    // Обновление видимости кнопки "Удалить выбранные"
    function updateDeleteSelectedButton() {
        const checkedCount = document.querySelectorAll('.product-checkbox:checked').length;
        const deleteSelectedBtn = document.getElementById('delete-selected-products');

        if (deleteSelectedBtn) {
            if (checkedCount > 0) {
                deleteSelectedBtn.style.display = 'inline-block';
                deleteSelectedBtn.innerHTML = `<i class="fa fa-trash"></i> Удалить выбранные (${checkedCount})`;
            } else {
                deleteSelectedBtn.style.display = 'none';
            }
        }
    }

    // Обработчик клика на кнопку "Удалить выбранные"
    const deleteSelectedBtn = document.getElementById('delete-selected-products');
    if (deleteSelectedBtn) {
        deleteSelectedBtn.addEventListener('click', function() {
        const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
        if (checkedBoxes.length === 0) {
            alert('Выберите товары для удаления');
            return;
        }

        const productIds = Array.from(checkedBoxes).map(cb => cb.value);
        showDeleteConfirmation(productIds);
        });
    }

    // Функция показа модалки подтверждения удаления
    function showDeleteConfirmation(productIds) {
        const modal = document.getElementById('delete-confirmation-modal');
        const text = document.getElementById('delete-confirmation-text');
        const confirmBtn = document.getElementById('delete-confirm-btn');
        const cancelBtn = document.getElementById('delete-cancel-btn');

        text.textContent = `Вы уверены, что хотите удалить ${productIds.length} выбранных товаров? Это действие нельзя отменить.`;

        // Обработчики кнопок
        confirmBtn.onclick = function() {
            modal.style.display = 'none';
            deleteSelectedProducts(productIds);
        };

        cancelBtn.onclick = function() {
            modal.style.display = 'none';
        };

        // Закрытие по клику вне модалки
        modal.onclick = function(e) {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        };

        modal.style.display = 'block';
    }

    // Функция удаления выбранных товаров
    function deleteSelectedProducts(productIds) {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        fetch('/supplier/products/bulk', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                product_ids: productIds
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert(`Успешно удалено товаров: ${data.deleted_count}`);
                loadProducts(); // Перезагружаем список товаров
            } else {
                alert('Ошибка при удалении товаров: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            if (error.message.includes('419')) {
                alert('Ошибка безопасности. Пожалуйста, обновите страницу и попробуйте снова.');
            } else {
                alert('Произошла ошибка при удалении товаров: ' + error.message);
            }
        });
    }

    // Делегированные обработчики для динамически загружаемых элементов
    document.addEventListener('change', function(e) {
        if (e.target.id === 'select-all-products') {
            handleSelectAll();
        } else if (e.target.classList.contains('product-checkbox')) {
            handleProductCheckbox();
        }
    });
});
</script>
@endsection