strprfcrm/resources/views/partials/table.blade.php

<div class="table-responsive js-main-table-scroll">


    <div class="table-buttons py-2 bg-primary rounded-start d-flex flex-column ">
        <button type="button" class="btn btn-sm text-white" data-bs-toggle="modal"
                data-bs-target="#table_{{ $id }}_modal_search">
            <i class="bi bi-search-heart @if(request()->has('s')) text-danger @endif"></i>
        </button>

        <button type="button" class="btn btn-sm text-white " data-bs-toggle="modal"
                data-bs-target="#table_{{ $id }}_modal_filters">
            <i class="bi bi-funnel-fill @if(request()->has('filters')) text-danger @endif"></i>
        </button>

        <button type="button" class="btn btn-sm text-white " data-bs-toggle="modal"
                data-bs-target="#table_{{ $id }}_modal_settings">
            <i class="bi bi-gear-fill"></i>
        </button>
    </div>
    <table class="table table-interactive table-initial-hidden" id="tbl" data-table-name="{{ $id }}">
        <thead class="table-head-shadow">
        <tr>
            @if($selectable ?? false)
                <th scope="col" class="bg-primary-subtle text-center" data-no-row-select>
                    <input type="checkbox" class="form-check-input js-table-select-all"
                           aria-label="Выбрать все строки на странице">
                </th>
            @endif
            @foreach($header as $headerName => $headerTitle)
                @php
                    $normalizedHeaderName = str_replace('_txt', '', $headerName);
                    $isCurrentSortColumn = $headerName === $sortBy || $normalizedHeaderName === $sortBy;
                @endphp
                <th scope="col" class="bg-primary-subtle column_{{ $headerName }}">
                    <div class="d-flex align-items-center justify-content-between">

                        <div class="@if($headerName !== 'actions') cursor-pointer sort-by-column @endif" data-name="{{ $headerName }}">
                            {{ $headerTitle }}
                        </div>
                        <div class="text-center mx-1 @if($headerName !== 'actions') cursor-pointer @endif" data-name="{{ $headerName }}">
                            @if($headerName !== 'actions' && $isCurrentSortColumn)
                                @if($orderBy === 'asc')
                                    <i class="bi bi-arrow-down-square-fill text-primary"></i>
                                @else
                                    <i class="bi bi-arrow-up-square-fill text-primary"></i>
                                @endif
                            @endif
                        </div>
                        @if(($enableColumnFilters ?? true) && $headerName !== 'image' && $headerName !== 'actions')
                            @php
                                $filters = $filters ?? [];
                                $ranges = $ranges ?? [];
                                $dates = $dates ?? [];
                                $type = null;
                                $data = (array_merge($filters, $ranges, $dates))[$headerName] ?? null;

                                if (isset($filters[$headerName])) {
                                    $type = 'filters';
                                } elseif (isset($ranges[$headerName])) {
                                    // В фильтрах заголовка всегда показываем список фактических значений.
                                    $type = 'filters';
                                } elseif (isset($dates[$headerName])) {
                                    $type = 'filters';
                                }
                            @endphp
                            <div class="text-end cursor-pointer dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                <i
                                        data-bs-auto-close="outside"
                                        aria-expanded="false"
                                        data-bs-toggle="dropdown"
                                        class="dropdown-toggle bi
                                @if(isset(request()->filters[$headerName]) ||
                                    isset(request()->filters[$headerName . '_from']) ||
                                    isset(request()->filters[$headerName . '_to']) ||
                                    isset(request()->filters[str_replace('_txt', '', $headerName) . '_from']) ||
                                    isset(request()->filters[str_replace('_txt', '', $headerName) . '_to'])
                                    )
                                    bi-funnel-fill text-danger
                                    @else
                                    bi-funnel
                                @endif
                                " id="{{$headerName}}"></i>
                                @include('partials.newFilterElement', ['id' => $headerName, 'data' => $data, 'type' => $type, 'table' => $id, 'isSort' => $isCurrentSortColumn, '$orderBy' => $orderBy])
                            </div>
                        @endif
                    </div>

                </th>
            @endforeach

        </tr>
        </thead>
        <tbody>
        @foreach($strings as $string)
            @php
                $rowId = $string->id ?? null;
                $rowAnchor = $rowId ? 'row-' . $rowId : null;
                $rowHref = null;
                if (isset($routeName) && $rowId && !empty($nav ?? null)) {
                    $rowHref = route($routeName, [$string->id, 'nav' => $nav]);
                }
            @endphp
            <tr
                @if($rowAnchor) id="{{ $rowAnchor }}" data-row-id="{{ $rowId }}" @endif
                @if($rowHref) data-row-href="{{ $rowHref }}" @endif
                @if($id === 'schedule_orders')
                    class="table-{{ $string->status->color() }} {{ $string->status === \App\Enums\ProductionOrderStatus::Closed ? 'opacity-50' : '' }}"
                @elseif($id === 'notifications')
                    data-notification-id="{{ $string->id }}"
                    data-notification-read="{{ $string->isRead() ? '1' : '0' }}"
                    data-read-class="{{ match($string->type) { 'reclamation' => 'notification-read-reclamation', 'platform' => 'notification-read-platform', 'schedule' => 'notification-read-schedule', default => 'notification-read-platform' } }}"
                    class="{{ $string->isRead() ? match($string->type) { 'reclamation' => 'notification-read-reclamation', 'platform' => 'notification-read-platform', 'schedule' => 'notification-read-schedule', default => 'notification-read-platform' } : 'notification-unread' }}"
                @endif
            >
                @if($selectable ?? false)
                    <td class="align-middle text-center" data-no-row-select>
                        <input type="checkbox"
                               class="form-check-input js-table-row-select"
                               value="{{ $rowId }}"
                               aria-label="Выбрать строку {{ $rowId }}">
                    </td>
                @endif
                @foreach($header as $headerName => $headerTitle)
                    <td class="column_{{$headerName}} align-middle"
                    >
                        @if(str_contains($headerName, '-'))
                            @php
                                list($rel, $field) = explode('-', $headerName);
                            @endphp
                            @if(isset($string->$rel->$field))
                                @if(str_ends_with($field, '_id'))
                                    @php
                                        $relation = \Illuminate\Support\Str::camel(str_replace('_id', '', $field));
                                    @endphp
                                    {!! $string->$rel->$relation?->name; !!}
                                @else
                                    @if(str_contains($field, 'image') && $string->$rel->$field)
                                        <a href="{{ $string->$rel->$field }}" data-toggle="lightbox"
                                           data-gallery="photos" data-size="fullscreen">
                                            <img src="{{ $string->$rel->$field }}" alt="" class="img-thumbnail maf-img">
                                        </a>
                                    @else
                                        {!! $string->$rel->$field !!}
                                    @endif
                                @endif
                            @else

                                <ul class="small mb-0 list-group list-group-flush bg-secondary">
                                    @foreach($string->$rel ?? [] as $item)
                                        <li class="list-group-item py-0 bg-body-secondary">
                                            {!! $item->$field !!}
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        @elseif(str_ends_with($headerName, '_id'))
                            @php
                                $relation = \Illuminate\Support\Str::camel(str_replace('_id', '', $headerName));
                            @endphp
                            @if($headerName == 'order_status_id')
                                <div class="badge fs-5 text-bg-{{ App\Models\Order::STATUS_COLOR[$string->order_status_id] }}">{{ $string->$relation?->name }}</div>
                            @else
                                {!! $string->$relation?->name; !!}
                            @endif
                        @elseif($id === 'product_sku' && in_array($headerName, ['rfid', 'factory_number', 'manufacture_date', 'statement_number', 'statement_date', 'upd_number'], true))
                            @if(canUpdateField('maf', $headerName))
                                <input
                                    type="{{ str_ends_with($headerName, '_date') ? 'date' : 'text' }}"
                                    class="form-control form-control-sm inline-product-sku-field"
                                    data-url="{{ route('product_sku.inline-update', $string->id) }}"
                                    data-field="{{ $headerName }}"
                                    value="{{ $string->$headerName }}"
                                >
                            @elseif(str_ends_with($headerName, '_date') && ($string->$headerName))
                                {{ \App\Helpers\DateHelper::getHumanDate($string->$headerName, true) }}
                            @else
                                <p title="{{ $string->$headerName }}">
                                    {{ \Illuminate\Support\Str::words($string->$headerName, config('app.words_in_table_cell_limit'), ' ...') }}
                                </p>
                            @endif
                        @elseif(str_ends_with($headerName, '_date') && ($string->$headerName))
                            {{ \App\Helpers\DateHelper::getHumanDate($string->$headerName, true) }}
                        @elseif(str_contains($headerName, 'image') && $string->$headerName)
                            <a href="{{ $string->$headerName }}" data-toggle="lightbox" data-gallery="photos"
                               data-size="fullscreen">
                                <img src="{{ $string->$headerName }}" alt="" class="img-thumbnail maf-img">
                            </a>
                        @elseif(str_contains($headerName, 'order_status_name'))
                            <select name="order_status_name" data-order-id="{{ $string->id }}" @disabled(!hasPermission('orders.update')) class="change-order-status form-control form-control-sm" >
                                @foreach($statuses as $statusId => $statusName)
                                    <option value="{{ $statusId }}" @selected($statusName == $string->$headerName)>{{ $statusName }}</option>
                                @endforeach
                            </select>
                        @elseif($id === 'reclamations' && $headerName === 'status_name')
                            <select name="status_id"
                                    data-reclamation-id="{{ $string->id }}"
                                    data-url="{{ route('reclamations.update-status', $string->id) }}"
                                    @disabled(!hasPermission('orders.update'))
                                    class="change-reclamation-status form-control form-control-sm">
                                @foreach($statuses as $statusId => $statusName)
                                    <option value="{{ $statusId }}" @selected($statusId == $string->status_id)>{{ $statusName }}</option>
                                @endforeach
                            </select>
                        @elseif($id === 'schedule_orders' && $headerName === 'status_name')
                            <span class="badge text-bg-{{ $string->status->color() }}">
                                {{ $string->status_name }}
                            </span>
                        @elseif($id === 'schedule_orders' && in_array($headerName, ['delivery_dates', 'installation_dates'], true))
                            @if($string->$headerName)
                                <span class="text-nowrap">{!! $string->$headerName !!}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        @elseif($id === 'schedule_orders' && $headerName === 'order_number')
                            <span class="{{ $string->isShipmentOverdue() ? 'badge text-bg-danger' : '' }}"
                                  @if($string->isShipmentOverdue()) title="Дата отгрузки по договору просрочена" @endif>
                                {{ $string->order_number }}
                            </span>
                        @elseif($headerName === 'tsn_number' && $string->$headerName)
                            <span data-bs-toggle="tooltip"
                                  data-bs-placement="top"
                                  title="{{ $string->tsn_number_description ?? 'Нет расшифровки' }}"
                                  class="tooltip-help">
                                {{ $string->$headerName }}
                            </span>
                        @elseif($headerName === 'pricing_code' && $string->$headerName)
                            <span data-bs-toggle="tooltip"
                                  data-bs-placement="top"
                                  title="{{ $string->pricing_code_description ?? 'Нет расшифровки' }}"
                                  class="tooltip-help">
                                {{ $string->$headerName }}
                            </span>
                        @elseif($headerName === 'pricing_codes_list' && $string->pricingCodes->count() > 0)
                            @foreach($string->pricingCodes as $pricingCode)
                                <span data-bs-toggle="tooltip"
                                      data-bs-placement="top"
                                      title="{{ $pricingCode->description ?? 'Нет расшифровки' }}"
                                      class="tooltip-help">
                                    {{ $pricingCode->code }}
                                </span>@if(!$loop->last)<br>@endif
                            @endforeach
                        @elseif($id === 'pricing_codes' && $headerName === 'type')
                            @if($string->type === 'tsn_number')
                                <span class="badge bg-info">№ по ТСН</span>
                            @else
                                <span class="badge bg-primary">Шифр расценки</span>
                            @endif
                        @elseif($id === 'pricing_codes' && $headerName === 'description')
                            @if(hasPermission('pricing_codes.update'))
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="description-text-{{ $string->id }}">{{ $string->description }}</span>
                                    <button type="button" class="btn btn-sm btn-link edit-description"
                                            data-id="{{ $string->id }}"
                                            data-description="{{ $string->description }}">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                                <form action="{{ route('pricing_codes.update', $string) }}" method="POST" class="edit-form-{{ $string->id }} is-hidden">
                                    @csrf
                                    @method('PUT')
                                    <div class="input-group input-group-sm">
                                        <input type="text" name="description" class="form-control" value="{{ $string->description }}">
                                        <button type="submit" class="btn btn-success">Сохранить</button>
                                        <button type="button" class="btn btn-secondary cancel-edit" data-id="{{ $string->id }}">Отмена</button>
                                    </div>
                                </form>
                            @else
                                {{ $string->description }}
                            @endif
                        @elseif($id === 'pricing_codes' && $headerName === 'actions')
                            @if(hasPermission('pricing_codes.delete'))
                                <form action="{{ route('pricing_codes.destroy', $string) }}" method="POST" class="d-inline js-confirm-submit"
                                      data-confirm-message="Удалить код {{ $string->code }}?">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">Удалить</button>
                                </form>
                            @endif
                        @elseif($id === 'contractor_prices' && $headerName === 'status_name')
                            @if($string->available)
                                <span class="badge text-bg-success">Доступен</span>
                            @else
                                <span class="badge text-bg-warning">МАФ недоступен</span>
                            @endif
                        @elseif($id === 'contractor_prices' && $headerName === 'actions')
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-primary edit-price"
                                data-bs-toggle="modal"
                                data-bs-target="#editPriceModal"
                                data-product-id="{{ $string->product_id }}"
                                data-article="{{ $string->article }}"
                                data-name="{{ e($string->name_in_spec) }}"
                                data-price="{{ $string->installation_price }}"
                            >
                                Изменить
                            </button>
                        @elseif($id === 'notifications' && $headerName === 'type')
                            <span class="badge text-bg-{{ \App\Models\UserNotification::TYPE_COLORS[$string->type] ?? 'secondary' }}">{{ $string->type_name }}</span>
                        @elseif($id === 'notifications' && $headerName === 'event')
                            {{ $string->event_name }}
                        @elseif($id === 'notifications' && $headerName === 'message')
                            {!! $string->message_html ?: e($string->message) !!}
                        @elseif($id === 'notifications' && $headerName === 'read_at')
                            @if($string->read_at)
                                {{ $string->read_at->format('d.m.Y H:i') }}
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        @elseif($id === 'notifications' && $headerName === 'created_at')
                            {{ $string->created_at?->format('d.m.Y H:i') }}
                        @elseif($id === 'users' && $headerName === 'role')
                            {{ \App\Models\Role::NAMES[$string->role] ?? $string->role }}
                        @elseif($headerName === 'actions' && isset($routeName) && isset($string->id))
                            <a href="{{ route($routeName, $string->id) }}" class="btn btn-sm btn-outline-primary">
                                Редактировать
                            </a>
                        @else
                            <p title="{!! $string->$headerName !!}">
                                {!! \Illuminate\Support\Str::words($string->$headerName, config('app.words_in_table_cell_limit'), ' ...') !!}
                            </p>
                        @endif
                    </td>
                @endforeach
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<!-- Модальное окно настроек таблицы -->
<div class="modal fade" id="table_{{ $id }}_modal_settings" tabindex="-1" aria-labelledby="table_{{ $id }}_modal_settings_label"
     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="table_{{ $id }}_modal_settings_label">Выбор отображаемых колонок</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                @foreach($header as $headerName => $headerTitle)
                    <div>
                        <label class="me-3"><input type="checkbox" checked="checked" data-name="{{ $headerName }}"
                                                   class="toggle-column checkbox-{{ $headerName }}"> {{ $headerTitle }}
                        </label>
                    </div>
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно фильтров -->
<div class="modal fade" id="table_{{ $id }}_modal_filters" tabindex="-1" aria-labelledby="table_{{ $id }}_modal_filters_label"
     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="table_{{ $id }}_modal_filters_label">Фильтры по колонкам таблицы</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <form class="filters">
                    @if(isset($filters) && is_array($filters))
                        @foreach($filters as $filterName => $filter)
                            @php $filter['values'] = ['' => ''] + $filter['values'] @endphp
                            @include('partials.select', [
                                    'name' => 'filters[' . $filterName . ']',
                                    'title' => $filter['title'],
                                    'options' => $filter['values'],
                                    'value' => request()->filters[$filterName] ?? '',
                                ])
                        @endforeach
                    @endif

                    @if(isset($ranges) && is_array($ranges))

                        @foreach($ranges as $rangeName => $range)

                            @include('partials.input', [
                                    'name' => 'filters[' . $rangeName . '_from]',
                                    'type' => 'number',
                                    'title' => $range['title'] . ' с:',
                                    'min' => $range['min'],
                                    'max' => $range['max'],
                                    'value' => request()->filters[$rangeName . '_from'] ?? '', // $range['min']
                                ])
                            @include('partials.input', [
                                    'name' => 'filters[' . $rangeName . '_to]',
                                    'type' => 'number',
                                    'title' => ' по:',
                                    'min' => $range['min'],
                                    'max' => $range['max'],
                                    'value' => request()->filters[$rangeName . '_to'] ?? '', // $range['max']
                                ])
                        @endforeach
                    @endif
                    @if(isset($dates) && is_array($dates))

                        @foreach($dates as $rangeName => $range)
                            @include('partials.input', [
                                    'name' => 'filters[' . $rangeName . '_from]',
                                    'type' => 'date',
                                    'title' => $range['title'] . ' с:',
                                    'min' => $range['min'],
                                    'max' => $range['max'],
                                    'value' => request()->filters[$rangeName . '_from'] ?? '',
                                ])
                            @include('partials.input', [
                                    'name' => 'filters[' . $rangeName . '_to]',
                                    'type' => 'date',
                                    'title' => $range['title'] . ' по:',
                                    'min' => $range['min'],
                                    'max' => $range['max'],
                                    'value' => request()->filters[$rangeName . '_to'] ?? '',
                                ])
                        @endforeach
                    @endif
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary accept-filters" data-bs-dismiss="modal">Применить</button>
                <button type="button" class="btn btn-outline-secondary reset-filters" data-bs-dismiss="modal">Сбросить
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно поиска -->
<div class="modal fade" id="table_{{ $id }}_modal_search" tabindex="-1" aria-labelledby="table_{{ $id }}_modal_search_label"
     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="table_{{ $id }}_modal_search_label">Поиск</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <div>
                    Поиск ведётся по следующим колонкам:
                    <span class="fst-italic">
                        @foreach($searchFields as $searchField)
                            {{ $header[$searchField] ?? $searchField }}
                            @if(!$loop->last)
                                ,
                            @endif
                        @endforeach
                    </span>
                </div>
                <form class="search-form">
                    @include('partials.input', [
                        'name'  => 's',
                        'title' => 'Поиск',
                        'placeholder' => 'что ищем?',
                        'value' => request()->s ?? '',
                    ])
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary accept-search" data-bs-dismiss="modal">Найти</button>
                <button type="button" class="btn btn-outline-secondary reset-search" data-bs-dismiss="modal">Сбросить
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script type="module">
        // Ждём загрузки jQuery через Vite
        function waitForJQuery(callback) {
            if (typeof window.$ !== 'undefined') {
                callback();
            } else {
                setTimeout(() => waitForJQuery(callback), 50);
            }
        }

        waitForJQuery(function () {
        // on page load set column visible
        let tbl = $('#tbl');
        let tableName = tbl.attr('data-table-name');
        let tables = JSON.parse(localStorage.getItem('table_' + tableName));

        // on first load create tables object
        if (!tables) {
            tables = {};
        }

        // hide disabled columns
        $.each(tables, function (colName, colStatus) {
            if (!colStatus) {
                $('.checkbox-' + colName).attr('checked', false);
                $('.column_' + colName).hide();
            }
        });

        // highlight search text
        let searchText = $('.search-form input').val();
        if (searchText !== '') {
            let innerHTML = tbl.html();
            let index = innerHTML.indexOf(searchText);
            if (index >= 0) {
                innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + searchText.length) + "</span>" + innerHTML.substring(index + searchText.length);
                tbl.html(innerHTML);
            }
        }

        $('.table').fadeIn();

        function isRowActionTarget(target) {
            return $(target).closest('a, button, input, select, textarea, label, .dropdown, [data-bs-toggle], [data-no-row-select]').length > 0;
        }

        function openRow($row, newTab = false) {
            const href = $row.data('row-href');
            if (!href) {
                return;
            }
            selectRow($row, false);
            if (newTab) {
                window.open(href, '_blank');
            } else {
                window.location.href = href;
            }
        }

        function selectRow($row, updateHash = true) {
            if (!$row || !$row.length) {
                return;
            }
            $row.closest('tbody').find('tr.is-selected').removeClass('is-selected');
            $row.addClass('is-selected');
            if (updateHash) {
                const rowId = $row.data('row-id');
                if (rowId) {
                    const hash = '#row-' + rowId;
                    const newUrl = window.location.pathname + window.location.search + hash;
                    history.replaceState(null, '', newUrl);
                    if (tableName) {
                        localStorage.setItem('table_last_row_' + tableName, String(rowId));
                    }
                }
            }
        }

        $(document).on('click', '.table-interactive tbody tr', function (e) {
            if (isRowActionTarget(e.target)) {
                return;
            }
            const $row = $(this);

            // На десктопах с Ctrl открываем в новой вкладке сразу по одиночному клику
            const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || ('ontouchstart' in window);
            if (!isTouchDevice && (e.ctrlKey || e.metaKey)) {
                openRow($row, true);
                return;
            }

            selectRow($row);

            // На мобильных dblclick часто не срабатывает, поэтому поддерживаем двойной тап.
            if (!isTouchDevice) {
                return;
            }

            const now = Date.now();
            const rowKey = String($row.data('row-id') ?? $row.data('row-href') ?? '');
            const lastTapAt = Number($row.data('last-tap-at') ?? 0);
            const lastTapKey = String($row.data('last-tap-key') ?? '');

            if (lastTapAt && (now - lastTapAt) < 450 && rowKey && lastTapKey === rowKey) {
                openRow($row);
                $row.removeData('last-tap-at').removeData('last-tap-key');
                return;
            }

            $row.data('last-tap-at', now);
            $row.data('last-tap-key', rowKey);
        });

        $(document).on('dblclick', '.table-interactive tbody tr', function (e) {
            if (isRowActionTarget(e.target)) {
                return;
            }
            openRow($(this), e.ctrlKey || e.metaKey);
        });

        $('.toggle-column').on('change', function () {
            let columnName = $(this).attr('data-name');
            let columnStatus = $(this).is(':checked');

            // save column status
            tables[columnName] = columnStatus;
            localStorage.setItem('table_' + tableName, JSON.stringify(tables));

            // show or hide column
            if (columnStatus) {
                $('.column_' + columnName).show('fast');
            } else {
                $('.column_' + columnName).hide('fast');
            }
        });

        $('.sort-by-column').on('click', function () {
            let columnName = $(this).attr('data-name');
            let currentUrl = new URL(document.location.href);
            let currentColumnName = currentUrl.searchParams.get('sortBy');
            currentUrl.searchParams.set('sortBy', columnName);
            if ((currentColumnName !== columnName) || (currentUrl.searchParams.has('order'))) {
                currentUrl.searchParams.delete('order');
            } else {
                currentUrl.searchParams.set('order', 'desc');
            }
            document.location.href = currentUrl.href;
        });

        $('.accept-filters').on('click', function () {
            let filters = $('.filters').serializeArray();
            let currentUrl = new URL(document.location.href);
            $.each(filters, function (id, filter) {
                if (filter.value !== '') {
                    currentUrl.searchParams.set(filter.name, filter.value);
                } else {
                    currentUrl.searchParams.delete(filter.name);
                }
            });
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.reset-filters').on('click', function () {
            let filters = $('.filters').serializeArray();
            let currentUrl = new URL(document.location.href);
            $.each(filters, function (id, filter) {
                currentUrl.searchParams.delete(filter.name);
            });
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.accept-search').on('click', function () {
            let s = $('.search-form input').val();
            let currentUrl = new URL(document.location.href);
            if (s !== '') {
                currentUrl.searchParams.set('s', s);
            } else {
                currentUrl.searchParams.delete('s');
            }
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.reset-search').on('click', function () {
            let currentUrl = new URL(document.location.href);
            currentUrl.searchParams.delete('s');
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.change-order-status').on('focus', function () {
            $(this).data('previous-value', $(this).val());
        });

        $('.change-order-status').on('change', function () {
            let $select = $(this);
            let orderStatusId = $select.val();
            let orderId = $select.attr('data-order-id');
            let previousValue = $select.data('previous-value');

            $.post(
                '{{ route('order.update') }}',
                {
                    '_token' : '{{ csrf_token() }}',
                    id: orderId,
                    order_status_id: orderStatusId
                },
                function () {
                    $select.data('previous-value', orderStatusId);
                    $('.alerts').append(
                        '<div class="main-alert alert alert-success" role="alert">Обновлён статус площадки!</div>'
                    );
                    setTimeout(function () {
                        $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                            $(".main-alert").slideUp(500);
                        })
                    }, 3000);
                }
            ).fail(function (xhr) {
                if (previousValue !== undefined) {
                    $select.val(previousValue);
                }

                let errorText = xhr.responseJSON?.message || 'Не удалось обновить статус площадки!';
                $('.alerts').append(
                    '<div class="main-alert alert alert-danger" role="alert">' + errorText + '</div>'
                );
                setTimeout(function () {
                    $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                        $(".main-alert").slideUp(500);
                    })
                }, 3000);
            });
        });

        $('.change-reclamation-status').on('change', function () {
            let statusId = $(this).val();
            let url = $(this).attr('data-url');

            $.post(
                url,
                {
                    '_token' : '{{ csrf_token() }}',
                    status_id: statusId
                },
                function () {
                    $('.alerts').append(
                        '<div class="main-alert alert alert-success" role="alert">Обновлён статус рекламации!</div>'
                    );
                    setTimeout(function () {
                        $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                            $(".main-alert").slideUp(500);
                        })
                    }, 3000);
                }
            );
        });

        $('.inline-product-sku-field').on('focus', function () {
            $(this).data('previous-value', $(this).val());
        });

        $('.inline-product-sku-field').on('blur', function () {
            let $input = $(this);
            let value = $input.val();
            let previousValue = $input.data('previous-value');

            if (value === previousValue) {
                return;
            }

            $input.prop('disabled', true);

            $.post(
                $input.attr('data-url'),
                {
                    '_token' : '{{ csrf_token() }}',
                    field: $input.attr('data-field'),
                    value: value
                },
                function (response) {
                    $input.data('previous-value', response.value ?? '');
                    $input.val(response.value ?? '');
                    $('.alerts').append(
                        '<div class="main-alert alert alert-success" role="alert">Поле МАФ обновлено!</div>'
                    );
                    setTimeout(function () {
                        $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                            $(".main-alert").slideUp(500);
                        })
                    }, 3000);
                }
            ).fail(function (xhr) {
                if (previousValue !== undefined) {
                    $input.val(previousValue);
                }

                let errorText = xhr.responseJSON?.message || 'Не удалось обновить поле МАФ!';
                $('.alerts').append(
                    '<div class="main-alert alert alert-danger" role="alert">' + errorText + '</div>'
                );
                setTimeout(function () {
                    $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                        $(".main-alert").slideUp(500);
                    })
                }, 3000);
            }).always(function () {
                $input.prop('disabled', false);
            });
        });

        function updateMainTableScrollHeight() {
            const tableScrollElement = document.querySelector('.js-main-table-scroll');
            if (!tableScrollElement) {
                return;
            }

            const tableTop = tableScrollElement.getBoundingClientRect().top;
            const bottomGap = 16;
            let paginationHeight = 0;

            const paginationRow = document.querySelector('.pagination')?.closest('.row');
            if (paginationRow) {
                paginationHeight = paginationRow.getBoundingClientRect().height + 8;
            }

            const maxHeight = Math.max(180, window.innerHeight - tableTop - paginationHeight - bottomGap);
            tableScrollElement.style.maxHeight = maxHeight + 'px';
        }

        $(document).ready(function () {
            updateMainTableScrollHeight();
            window.addEventListener('resize', updateMainTableScrollHeight);

            // Инициализация tooltips для полей tsn_number и pricing_code
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

            const hash = window.location.hash;
            if (hash && hash.startsWith('#row-')) {
                const $row = $(hash);
                if ($row.length) {
                    selectRow($row, false);
                    $row[0].scrollIntoView({block: 'center'});
                    const rowId = $row.data('row-id');
                    if (rowId && tableName) {
                        localStorage.setItem('table_last_row_' + tableName, String(rowId));
                    }
                    return;
                }
            }

            if (tableName) {
                const storedRowId = localStorage.getItem('table_last_row_' + tableName);
                if (storedRowId) {
                    const $storedRow = $('#row-' + storedRowId);
                    if ($storedRow.length) {
                        selectRow($storedRow, false);
                        $storedRow[0].scrollIntoView({block: 'center'});
                    }
                }
            }
        });
        }); // end waitForJQuery
    </script>
@endpush