@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 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        @if($scope === 'category')
                            @lang('Category Scope Editor')
                        @else
                            @lang('Product Scope Editor')
                        @endif
                    </h6>
                    <a href="{{ route('admin.seller-type-scope.index') }}" class="btn btn-sm btn--dark">
                        @lang('Back To Index')
                    </a>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-4">
                        <div class="col-lg-3">
                            <label class="font-weight-bold">@lang('Scope Type')</label>
                            <select id="scope_type_select" class="form-control">
                                <option value="category" @selected($scope === 'category')>@lang('Category')</option>
                                <option value="product" @selected($scope === 'product')>@lang('Product')</option>
                            </select>
                        </div>

                        @if($scope === 'category')
                            <div class="col-lg-9">
                                <label class="font-weight-bold">@lang('Category')</label>
                                <select id="scope_target_select" name="target_id" form="scopeEditorForm" class="select2-basic" required>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" @selected((int)$selectedTarget->id === (int)$category->id)>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @else
                            <div class="col-lg-9">
                                <label class="font-weight-bold">@lang('Product')</label>
                                <select id="scope_target_select" name="target_id" form="scopeEditorForm" class="select2-basic" required>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}" @selected((int)$selectedTarget->id === (int)$product->id)>
                                            {{ $product->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>

                    <form method="POST" action="{{ $saveRoute }}" id="scopeEditorForm">
                        @csrf
                        <input type="hidden" name="scope_type" value="{{ $scope }}">
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <input type="text" class="form-control w-auto js-scope-filter" placeholder="@lang('Search seller types')" />
                            <button type="button" class="btn btn--primary btn-sm js-scope-select-all">@lang('Select all')</button>
                            <button type="button" class="btn btn--dark btn-sm js-scope-clear">@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 = $selection->get($sellerType->id);
                                            $checked = $row !== null;
                                        @endphp
                                        <tr class="js-scope-row" data-label="{{ strtolower($sellerType->title ?? '') }}">
                                            <td>
                                                <input type="checkbox"
                                                    class="js-scope-select"
                                                    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-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-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%">
                                                @lang('No seller types found')
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex gap-2 mt-4">
                            <button type="submit" class="btn btn--primary">@lang('Save Scope')</button>
                            <a href="{{ route('admin.seller-type-scope.index') }}" class="btn btn--dark">@lang('Cancel')</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function () {
            var scopeType = "{{ $scope }}";
            var createBase = "{{ route('admin.seller-type-scope.create') }}";
            var scopeTypeSelect = document.getElementById('scope_type_select');
            var targetSelect = document.getElementById('scope_target_select');

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

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

            function goToScope(targetScope, targetId) {
                window.location = createBase + '?scope=' + encodeURIComponent(targetScope) + '&target_id=' + encodeURIComponent(targetId);
            }

            if (scopeTypeSelect) {
                scopeTypeSelect.addEventListener('change', function () {
                    var nextScope = scopeTypeSelect.value === 'product' ? 'product' : 'category';
                    goToScope(nextScope, '');
                });
            }

            if (targetSelect) {
                targetSelect.addEventListener('change', function () {
                    goToScope(scopeType, targetSelect.value);
                });
            }

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

            var filterInput = document.querySelector('.js-scope-filter');
            if (filterInput) {
                filterInput.addEventListener('input', function () {
                    filterRows(filterInput.value || '');
                });
            }

            var selectAllButton = document.querySelector('.js-scope-select-all');
            if (selectAllButton) {
                selectAllButton.addEventListener('click', function () {
                    document.querySelectorAll('.js-scope-select').forEach(function (checkbox) {
                        checkbox.checked = true;
                    });
                    updateDisabled();
                });
            }

            var clearButton = document.querySelector('.js-scope-clear');
            if (clearButton) {
                clearButton.addEventListener('click', function () {
                    document.querySelectorAll('.js-scope-select').forEach(function (checkbox) {
                        checkbox.checked = false;
                    });
                    updateDisabled();
                });
            }

            updateDisabled();
        })();
    </script>
@endpush