<x-admin.card>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-muted">{{ __('admin/product-config-option-groups.products_tab_intro') }}</span>
        @can('update', $productConfigOptionGroup)
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#attachProductsModal">
            <i class="fas fa-link"></i> {{ __('admin/product-config-option-groups.bulk_attach') }}
        </button>
        @endcan
    </div>

    @php
        $attachedProducts = \App\Models\Product::whereIn('id',
            \App\Models\ProductConfigOptionRelation::where('group_id', $productConfigOptionGroup->id)
                ->distinct()->pluck('product_id')
        )->orderBy('name')->get();
    @endphp

    <ul class="list-group">
        @forelse ($attachedProducts as $product)
            <li class="list-group-item d-flex align-items-center justify-content-between">
                <span><i class="fas fa-box text-muted me-2"></i> {{ $product->name }}</span>
                <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-arrow-right"></i>
                </a>
            </li>
        @empty
            <li class="list-group-item text-center text-muted py-4">
                {{ __('admin/product-config-option-groups.empty_products') }}
            </li>
        @endforelse
    </ul>
</x-admin.card>

{{-- Attach modal --}}
<div class="modal fade" id="attachProductsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin/product-config-option-groups.attach_modal_title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex gap-2 mb-3">
                    <select class="form-select form-select-sm" data-status-filter style="width: 200px;">
                        <option value="">{{ __('admin/common.all') }}</option>
                        <option value="attached">{{ __('admin/product-config-option-groups.filter_attached') }}</option>
                        <option value="not_attached">{{ __('admin/product-config-option-groups.filter_not_attached') }}</option>
                    </select>
                </div>
                <table class="table table-sm" style="width: 100%;">
                    <thead>
                        <tr>
                            <th style="width: 40px;"></th>
                            <th>{{ __('admin/product-config-option-groups.product_name') }}</th>
                            <th>{{ __('admin/product-config-option-groups.status') }}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ __('admin/common.cancel') }}
                </button>
                <button type="button" class="btn btn-primary" data-save>
                    {{ __('admin/common.save') }}
                </button>
            </div>
        </div>
    </div>
</div>
