@php
    $slots = old('pack_slots', $slots);
    $slots[] = ['mode' => 'fixed', 'product_ids' => []];
@endphp

<div class="mb-6">
    @include('admin/shared/textarea', [
        'name' => 'pack_panel_content',
        'label' => __('pack::lang.admin.panel_content'),
        'value' => old('pack_panel_content', $product->getMetadata('pack_panel_content') ?: __('pack::lang.panel.default')),
        'rows' => 5,
        'help' => __('pack::lang.admin.panel_content_help'),
    ])
</div>

<div class="space-y-4" id="pack-slots">
    <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('pack::lang.admin.config_help') }}</p>

    @foreach($slots as $index => $slot)
        <div class="pack-slot rounded border border-gray-200 dark:border-gray-700 p-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                @include('admin/shared/select', [
                    'name' => 'pack_slots['.$index.'][mode]',
                    'label' => __('pack::lang.admin.slot_mode'),
                    'options' => [
                        'fixed' => __('pack::lang.admin.slot_modes.fixed'),
                        'choice' => __('pack::lang.admin.slot_modes.choice'),
                    ],
                    'value' => $slot['mode'] ?? 'fixed',
                ])
                </div>

                <div class="md:col-span-2">
                    <div>
                    @include('admin/shared/search-select-multiple', [
                        'name' => 'pack_slots['.$index.'][product_ids][]',
                        'label' => __('global.products'),
                        'options' => $products,
                        'value' => array_map('intval', $slot['product_ids'] ?? []),
                    ])
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<template id="pack-slot-template">
    <div class="pack-slot rounded border border-gray-200 dark:border-gray-700 p-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                @include('admin/shared/select', [
                    'name' => '__NAME__[mode]',
                    'label' => __('pack::lang.admin.slot_mode'),
                    'options' => [
                        'fixed' => __('pack::lang.admin.slot_modes.fixed'),
                        'choice' => __('pack::lang.admin.slot_modes.choice'),
                    ],
                    'value' => 'fixed',
                ])
            </div>
            <div class="md:col-span-2">
                <div>
                    @include('admin/shared/search-select-multiple', [
                        'name' => '__NAME__[product_ids][]',
                        'label' => __('global.products'),
                        'options' => $products,
                        'value' => [],
                    ])
                </div>
            </div>
        </div>
    </div>
</template>

<button type="button" class="btn-primary mt-4" id="add-pack-slot">{{ __('pack::lang.admin.add_slot') }}</button>

<script>
    document.getElementById('add-pack-slot')?.addEventListener('click', function () {
        const wrapper = document.getElementById('pack-slots');
        const template = document.getElementById('pack-slot-template').innerHTML;
        const index = wrapper.querySelectorAll('.pack-slot').length;
        wrapper.insertAdjacentHTML('beforeend', template.replaceAll('__NAME__', 'pack_slots[' + index + ']'));

        if (window.HSSelect) {
            window.HSSelect.autoInit();
        } else if (window.HSStaticMethods) {
            window.HSStaticMethods.autoInit();
        }
    });
</script>