strprfcrm/resources/views/common_catalog/index.blade.php

@extends('layouts.app')

@section('content')
    <div class="row mb-2 page-header-row">
        <div class="col-12 col-md-6 page-header-title">
            <h3>Каталог общий</h3>
        </div>
        <div class="col-12 col-md-6 text-md-end page-header-actions">
            @if($canExportTechnicalDescriptions)
                <button type="button" id="technical-description-export-button"
                        class="btn btn-sm mb-1 btn-outline-primary page-action-btn" disabled
                        data-bs-toggle="modal" data-bs-target="#technicalDescriptionExportModal">
                    <i class="bi bi-file-earmark-word page-action-btn__icon"></i>
                    <span class="page-action-btn__label">Техописания</span>
                </button>
            @endif
            @if(hasPermission('common-catalog.import'))
                <button type="button" class="btn btn-sm mb-1 btn-primary page-action-btn"
                        data-bs-toggle="modal" data-bs-target="#commonCatalogImportModal">
                    <i class="bi bi-upload page-action-btn__icon"></i>
                    <span class="page-action-btn__label">Импорт</span>
                </button>
            @endif
            @if(hasPermission('common-catalog.export'))
                <form action="{{ route('common-catalog.export') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-sm mb-1 btn-primary page-action-btn">
                        <i class="bi bi-download page-action-btn__icon"></i>
                        <span class="page-action-btn__label">Экспорт</span>
                    </button>
                </form>
            @endif
            @if(hasPermission('common-catalog.create'))
                <a href="{{ route('common-catalog.create', ['nav' => $nav ?? null]) }}"
                   class="btn btn-sm mb-1 btn-primary page-action-btn">
                    <i class="bi bi-plus-lg page-action-btn__icon"></i>
                    <span class="page-action-btn__label">Добавить</span>
                </a>
            @endif
        </div>
    </div>

    @include('partials.table', [
        'id' => $id,
        'header' => $header,
        'strings' => $items,
        'routeName' => 'common-catalog.show',
        'routeParam' => 'commonCatalogItem',
        'nav' => $nav,
        'selectable' => $canExportTechnicalDescriptions,
    ])

    @include('partials.pagination', ['items' => $items])

    @if(hasPermission('common-catalog.import'))
        <div class="modal fade" id="commonCatalogImportModal" tabindex="-1"
             aria-labelledby="commonCatalogImportModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen-sm-down">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="commonCatalogImportModalLabel">Импорт общего каталога</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                    </div>
                    <div class="modal-body">
                        <p class="small text-muted">
                            Используйте утверждённый XLSX-шаблон. Существующие позиции обновляются по артикулу.
                        </p>
                        <form action="{{ route('common-catalog.import') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @include('partials.input', [
                                'title' => 'XLSX файл',
                                'name' => 'import_file',
                                'type' => 'file',
                                'required' => true,
                            ])
                            @include('partials.submit', ['name' => 'Импорт'])
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if($canExportTechnicalDescriptions)
        <div class="modal fade" id="technicalDescriptionExportModal" tabindex="-1"
             aria-labelledby="technicalDescriptionExportModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="technicalDescriptionExportModalLabel">Экспорт технических описаний</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                    </div>
                    <form id="technical-description-export-form"
                          action="{{ route('common-catalog.technical-description.export') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <p>Выбрано позиций: <strong id="technical-description-selected-count">0</strong></p>
                            <div id="technical-description-selected-inputs"></div>
                            @include('partials.select', [
                                'name' => 'description_mode',
                                'title' => 'Содержимое описания',
                                'options' => $technicalDescriptionModes,
                                'value' => \App\Services\TechnicalDescriptionService::MODE_CHARACTERISTICS_SHORT,
                            ])
                            <div class="row mb-2">
                                <div class="offset-md-4 col-md-8">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input" name="separate_documents" value="1">
                                        Отдельный DOCX для каждой позиции в ZIP
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
                            <button type="submit" class="btn btn-primary">Сформировать</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    const rows = Array.from(document.querySelectorAll('.js-table-row-select'));
                    const selectAll = document.querySelector('.js-table-select-all');
                    const button = document.getElementById('technical-description-export-button');
                    const count = document.getElementById('technical-description-selected-count');
                    const inputs = document.getElementById('technical-description-selected-inputs');

                    const selected = () => rows.filter((checkbox) => checkbox.checked);
                    const refresh = () => {
                        const selectedRows = selected();
                        button.disabled = selectedRows.length === 0;
                        count.textContent = String(selectedRows.length);
                        if (selectAll) {
                            selectAll.checked = rows.length > 0 && selectedRows.length === rows.length;
                            selectAll.indeterminate = selectedRows.length > 0 && selectedRows.length < rows.length;
                        }
                    };

                    selectAll?.addEventListener('change', () => {
                        rows.forEach((checkbox) => checkbox.checked = selectAll.checked);
                        refresh();
                    });
                    rows.forEach((checkbox) => checkbox.addEventListener('change', refresh));

                    document.getElementById('technical-description-export-form')?.addEventListener('submit', () => {
                        inputs.replaceChildren(...selected().map((checkbox) => {
                            const input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = 'item_ids[]';
                            input.value = checkbox.value;
                            return input;
                        }));
                    });

                    refresh();
                });
            </script>
        @endpush
    @endif
@endsection