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

@extends('layouts.app')

@section('content')

    <div class="row mb-2 page-header-row">
        <div class="col-12 col-md-4 page-header-title">
            <h3>Заказы МАФ</h3>
        </div>
        <div class="col-auto col-md-4 text-md-center page-header-year">
            @include('partials.year-switcher')
        </div>
        <div class="col-auto col-md-4 text-md-end page-header-actions">
            @if(hasRole('admin,assistant_head'))
                <button type="button" class="btn btn-sm btn-outline-primary page-action-btn" data-bs-toggle="modal" data-bs-target="#setOrderInStockModal" aria-label="Весь заказ на складе">
                    <i class="bi bi-box-seam page-action-btn__icon"></i>
                    <span class="page-action-btn__label">Весь заказ на складе</span>
                </button>
            @endif
            <button type="button" class="btn btn-sm btn-primary page-action-btn" data-bs-toggle="modal" data-bs-target="#addModal" aria-label="Добавить">
                <i class="bi bi-plus-lg page-action-btn__icon"></i>
                <span class="page-action-btn__label">Добавить</span>
            </button>

        </div>
    </div>
    @include('partials.table', [
        'id'        => $id,
        'header'    => $header,
        'strings'   => $maf_orders,
        'routeName' => 'maf_order.show',
    ])

    @include('partials.pagination', ['items' => $maf_orders])
    <!-- Модальное окно добавления-->
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen-sm-down modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addModalLabel">Добавить заказ МАФ</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('maf_order.store') }}" method="post">
                        @csrf
                        <div id="select_maf_form">
                            <input type="text" class="form-control mb-2" placeholder="Поиск номенклатуры" id="search_maf">
                            <select id="select_maf" class="form-select mb-3" multiple></select>
                        </div>
                        <div class="is-hidden" id="sku_form">
                            <a href="#" onclick="$('#sku_form').slideUp(); $('#select_maf_form').slideDown()">назад</a>
                            <input type="hidden" id="product_id" name="product_id" value="">
                            @include('partials.input', ['name' => 'product_name', 'title' => 'МАФ', 'disabled' => true])
                            @include('partials.input', ['name' => 'order_number', 'title' => 'Номер заказа', 'required' => false])
                            @include('partials.input', ['name' => 'quantity', 'title' => 'Количество', 'required' => true, 'min' => 1])
                            @include('partials.submit', ['name' => 'Добавить'])
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if(hasRole('admin,assistant_head'))
        <div class="modal fade" id="setOrderInStockModal" tabindex="-1" aria-labelledby="setOrderInStockModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form action="{{ route('maf_order.set_order_in_stock') }}" method="post">
                        @csrf
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="setOrderInStockModalLabel">Отметить заказ как "На складе"</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                        </div>
                        <div class="modal-body">
                            <label for="bulk_order_number" class="form-label">Номер заказа</label>
                            <div class="position-relative">
                                <input type="text"
                                       class="form-control @error('bulk_order_number') is-invalid @enderror"
                                       id="bulk_order_number"
                                       name="bulk_order_number"
                                       value="{{ old('bulk_order_number') }}"
                                       placeholder="Начните вводить номер заказа"
                                       autocomplete="off"
                                       required>
                                <div class="autocomplete-dropdown autocomplete-dropdown--order" id="bulk_order_number_dropdown"></div>
                            </div>
                            <div class="form-text">Доступны только заказы со статусом «Заказан».</div>
                            @error('bulk_order_number')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Отмена</button>
                            <button type="submit" class="btn btn-primary btn-sm">Сменить статус на складе</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection
@push('scripts')
    <script type="module">
        $('#select_maf').on('change', function () {
            $('#product_id').val($(this).val());
            $('#product_name').val($('#select_maf option:selected').text()).slideDown();
            $('#select_maf_form').slideUp();
            $('#sku_form').slideDown();
        });

        waitForJQuery(function () {
            const $modal = $('#setOrderInStockModal');
            const $input = $modal.find('#bulk_order_number');
            const $dropdown = $modal.find('#bulk_order_number_dropdown');
            const orderNumbers = @json(($orderedOrderNumbers ?? collect())->values());
            let currentFocus = -1;

            function escapeHtml(text) {
                return String(text)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function escapeRegex(str) {
                return String(str).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            }

            function highlightMatch(text, query) {
                if (!text || !query) {
                    return escapeHtml(text || '');
                }

                const safeText = escapeHtml(text);
                const regex = new RegExp('(' + escapeRegex(query) + ')', 'gi');
                return safeText.replace(regex, '<strong>$1</strong>');
            }

            function hideDropdown() {
                $dropdown.hide();
                currentFocus = -1;
            }

            function showDropdown(items, query) {
                $dropdown.empty();
                currentFocus = -1;

                if (!items.length) {
                    $dropdown.html('<div class="autocomplete-item text-muted">Ничего не найдено</div>');
                    $dropdown.show();
                    return;
                }

                items.forEach(function (item) {
                    $dropdown.append(
                        '<div class="autocomplete-item" data-value="' + escapeHtml(item) + '">' +
                        '<div class="article">' + highlightMatch(item, query) + '</div>' +
                        '</div>'
                    );
                });

                $dropdown.show();
            }

            function selectValue(value) {
                $input.val(value).removeClass('is-invalid');
                hideDropdown();
            }

            function setActive($items) {
                $items.removeClass('active');
                if (currentFocus >= 0 && currentFocus < $items.length) {
                    const $active = $items.eq(currentFocus);
                    $active.addClass('active');
                    $active[0].scrollIntoView({block: 'nearest'});
                }
            }

            function searchOrderNumbers(query) {
                const normalized = String(query || '').trim().toLowerCase();

                if (normalized.length < 1) {
                    showDropdown(orderNumbers.slice(0, 50), '');
                    return;
                }

                const filtered = orderNumbers.filter(function (item) {
                    return String(item).toLowerCase().includes(normalized);
                });

                showDropdown(filtered.slice(0, 50), normalized);
            }

            $input.on('input focus', function () {
                searchOrderNumbers($(this).val());
            });

            $input.on('keydown', function (e) {
                const $items = $dropdown.find('.autocomplete-item:not(.text-muted)');

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    currentFocus++;
                    if (currentFocus >= $items.length) {
                        currentFocus = 0;
                    }
                    setActive($items);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    currentFocus--;
                    if (currentFocus < 0) {
                        currentFocus = $items.length - 1;
                    }
                    setActive($items);
                } else if (e.key === 'Enter') {
                    if ($items.length > 0 && currentFocus > -1) {
                        e.preventDefault();
                        selectValue(String($items.eq(currentFocus).data('value') || ''));
                    }
                } else if (e.key === 'Escape') {
                    hideDropdown();
                }
            });

            $dropdown.on('click', '.autocomplete-item:not(.text-muted)', function () {
                selectValue(String($(this).data('value') || ''));
            });

            $(document).on('click', function (e) {
                if (!$(e.target).closest('#bulk_order_number, #bulk_order_number_dropdown').length) {
                    hideDropdown();
                }
            });

            $modal.on('hidden.bs.modal', function () {
                hideDropdown();
            });
        });

        @if($errors->has('bulk_order_number') && hasRole('admin,assistant_head'))
            const setOrderInStockModalElement = document.getElementById('setOrderInStockModal');
            if (setOrderInStockModalElement) {
                const setOrderInStockModal = new bootstrap.Modal(setOrderInStockModalElement);
                setOrderInStockModal.show();
            }
        @endif
    </script>
@endpush