@extends('admin.layouts.app')
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card b-radius--10">
                <div class="card-header bg-white">
                    <h6 class="mb-0">@lang('Seller Type Scoping')</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-4">
                        @lang('Product overrides category scoping when set. Use category scoping as the default.')
                    </p>

                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="card border b-radius--10 h-100">
                                <div class="card-header bg-white">
                                    <h6 class="mb-0">@lang('Category Scoping')</h6>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                                        <label class="font-weight-bold mb-0">@lang('Category')</label>
                                        <select class="select2-basic" id="category_scope_select">
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}" @selected((int) $categoryId === (int) $category->id)>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <form method="POST" action="{{ route('admin.seller-type-scope.category.save', $categoryId) }}" id="categoryScopeForm">
                                        @csrf
                                        <div class="d-flex flex-wrap gap-2 mb-3">
                                            <input type="text" class="form-control w-auto js-scope-filter" data-scope="category" placeholder="@lang('Search seller types')" />
                                            <button type="button" class="btn btn--primary btn-sm js-scope-select-all" data-scope="category">@lang('Select all')</button>
                                            <button type="button" class="btn btn--dark btn-sm js-scope-clear" data-scope="category">@lang('Clear')</button>
                                        </div>

                                        <div class="table-responsive--sm table-responsive">
                                            <table class="table table--light style--two custom-data-table">
                                                <thead>
                                                <tr>
                                                    <th>@lang('Enabled')</th>
                                                    <th>@lang('Seller Type')</th>
                                                    <th>@lang('Required')</th>
                                                    <th>@lang('Sort Order')</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @forelse($sellerTypes as $sellerType)
                                                    @php
                                                        $row = $categorySelection->get($sellerType->id);
                                                        $checked = $row !== null;
                                                    @endphp
                                                    <tr class="js-scope-row" data-scope="category" data-label="{{ strtolower($sellerType->title ?? '') }}">
                                                        <td>
                                                            <input type="checkbox"
                                                                   class="js-scope-select"
                                                                   data-scope="category"
                                                                   data-id="{{ $sellerType->id }}"
                                                                   name="seller_types[{{ $sellerType->id }}][seller_type_id]"
                                                                   value="{{ $sellerType->id }}"
                                                                   @checked($checked)>
                                                        </td>
                                                        <td>{{ $sellerType->title }}</td>
                                                        <td>
                                                            <input type="checkbox"
                                                                   class="js-scope-required"
                                                                   data-scope="category"
                                                                   data-id="{{ $sellerType->id }}"
                                                                   name="seller_types[{{ $sellerType->id }}][is_required]"
                                                                   value="1"
                                                                   @checked($row?->is_required)
                                                                   @disabled(! $checked)>
                                                        </td>
                                                        <td>
                                                            <input type="number"
                                                                   class="form-control w-100 js-scope-sort"
                                                                   data-scope="category"
                                                                   data-id="{{ $sellerType->id }}"
                                                                   name="seller_types[{{ $sellerType->id }}][sort_order]"
                                                                   value="{{ $row?->sort_order }}"
                                                                   @disabled(! $checked)>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage ?? 'No seller types found') }}</td>
                                                    </tr>
                                                @endforelse
                                                </tbody>
                                            </table>
                                        </div>

                                        <button type="submit" class="btn btn--primary mt-3">@lang('Save Category Scoping')</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card border b-radius--10 h-100">
                                <div class="card-header bg-white">
                                    <h6 class="mb-0">@lang('Product Override')</h6>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                                        <label class="font-weight-bold mb-0">@lang('Product')</label>
                                        <select class="select2-basic" id="product_scope_select">
                                            @foreach($products as $product)
                                                <option value="{{ $product->id }}" @selected((int) $productId === (int) $product->id)>
                                                    {{ $product->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <form method="POST" action="{{ route('admin.seller-type-scope.product.save', $productId) }}" id="productScopeForm">
                                        @csrf
                                        <div class="d-flex flex-wrap gap-2 mb-3">
                                            <input type="text" class="form-control w-auto js-scope-filter" data-scope="product" placeholder="@lang('Search seller types')" />
                                            <button type="button" class="btn btn--primary btn-sm js-scope-select-all" data-scope="product">@lang('Select all')</button>
                                            <button type="button" class="btn btn--dark btn-sm js-scope-clear" data-scope="product">@lang('Clear')</button>
                                        </div>

                                        <div class="table-responsive--sm table-responsive">
                                            <table class="table table--light style--two custom-data-table">
                                                <thead>
                                                <tr>
                                                    <th>@lang('Enabled')</th>
                                                    <th>@lang('Seller Type')</th>
                                                    <th>@lang('Required')</th>
                                                    <th>@lang('Sort Order')</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @forelse($sellerTypes as $sellerType)
                                                    @php
                                                        $row = $productSelection->get($sellerType->id);
                                                        $checked = $row !== null;
                                                    @endphp
                                                    <tr class="js-scope-row" data-scope="product" data-label="{{ strtolower($sellerType->title ?? '') }}">
                                                        <td>
                                                            <input type="checkbox"
                                                                   class="js-scope-select"
                                                                   data-scope="product"
                                                                   data-id="{{ $sellerType->id }}"
                                                                   name="seller_types[{{ $sellerType->id }}][seller_type_id]"
                                                                   value="{{ $sellerType->id }}"
                                                                   @checked($checked)>
                                                        </td>
                                                        <td>{{ $sellerType->title }}</td>
                                                        <td>
                                                            <input type="checkbox"
                                                                   class="js-scope-required"
                                                                   data-scope="product"
                                                                   data-id="{{ $sellerType->id }}"
                                                                   name="seller_types[{{ $sellerType->id }}][is_required]"
                                                                   value="1"
                                                                   @checked($row?->is_required)
                                                                   @disabled(! $checked)>
                                                        </td>
                                                        <td>
                                                            <input type="number"
                                                                   class="form-control w-100 js-scope-sort"
                                                                   data-scope="product"
                                                                   data-id="{{ $sellerType->id }}"
                                                                   name="seller_types[{{ $sellerType->id }}][sort_order]"
                                                                   value="{{ $row?->sort_order }}"
                                                                   @disabled(! $checked)>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage ?? 'No seller types found') }}</td>
                                                    </tr>
                                                @endforelse
                                                </tbody>
                                            </table>
                                        </div>

                                        <button type="submit" class="btn btn--primary mt-3">@lang('Save Product Override')</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function () {
            function updateDisabled(scope) {
                document.querySelectorAll('.js-scope-select[data-scope="' + scope + '"]').forEach(function (checkbox) {
                    var id = checkbox.getAttribute('data-id');
                    var disabled = !checkbox.checked;
                    document.querySelectorAll('.js-scope-required[data-scope="' + scope + '"][data-id="' + id + '"]').forEach(function (input) {
                        input.disabled = disabled;
                    });
                    document.querySelectorAll('.js-scope-sort[data-scope="' + scope + '"][data-id="' + id + '"]').forEach(function (input) {
                        input.disabled = disabled;
                    });
                });
            }

            function filterRows(scope, term) {
                var query = term.toLowerCase();
                document.querySelectorAll('.js-scope-row[data-scope="' + scope + '"]').forEach(function (row) {
                    var label = row.getAttribute('data-label') || '';
                    row.style.display = label.indexOf(query) !== -1 ? '' : 'none';
                });
            }

            document.querySelectorAll('.js-scope-select').forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    updateDisabled(checkbox.getAttribute('data-scope'));
                });
            });

            document.querySelectorAll('.js-scope-filter').forEach(function (input) {
                input.addEventListener('input', function () {
                    filterRows(input.getAttribute('data-scope'), input.value || '');
                });
            });

            document.querySelectorAll('.js-scope-select-all').forEach(function (button) {
                button.addEventListener('click', function () {
                    var scope = button.getAttribute('data-scope');
                    document.querySelectorAll('.js-scope-select[data-scope="' + scope + '"]').forEach(function (checkbox) {
                        checkbox.checked = true;
                    });
                    updateDisabled(scope);
                });
            });

            document.querySelectorAll('.js-scope-clear').forEach(function (button) {
                button.addEventListener('click', function () {
                    var scope = button.getAttribute('data-scope');
                    document.querySelectorAll('.js-scope-select[data-scope="' + scope + '"]').forEach(function (checkbox) {
                        checkbox.checked = false;
                    });
                    updateDisabled(scope);
                });
            });

            updateDisabled('category');
            updateDisabled('product');

            var categorySelect = document.getElementById('category_scope_select');
            if (categorySelect) {
                categorySelect.addEventListener('change', function () {
                    window.location = "{{ route('admin.seller-type-scope.index') }}" + "?tab=category&category_id=" + categorySelect.value + "&product_id={{ $productId }}";
                });
            }

            var productSelect = document.getElementById('product_scope_select');
            if (productSelect) {
                productSelect.addEventListener('change', function () {
                    window.location = "{{ route('admin.seller-type-scope.index') }}" + "?tab=product&category_id={{ $categoryId }}&product_id=" + productSelect.value;
                });
            }
        })();
    </script>
@endpush