@php
    $optionGroups = $child_category->optionGroups()
        ->with(['translate', 'options.translate', 'options' => fn ($q) => $q->orderBy('sort_order')])
        ->orderBy('sort_order')
        ->get();

    $optionFieldTypeLabels = [
        'select' => __('translate.Option field select'),
        'text' => __('translate.Option field text'),
        'number' => __('translate.Option field number'),
    ];
@endphp

<section class="crancy-adashboard crancy-show mg-top-30">
    <div class="container container__bscreen">
        <div class="row">
            <div class="col-12">
                <div class="crancy-body">
                    <div class="crancy-dsinner">
                        <div class="crancy-product-card">
                            <h4 class="crancy-product-card__title">{{ __('translate.Category option groups') }}</h4>
                            <p class="text-muted">{{ __('translate.Category option groups help') }}</p>

                            @foreach ($optionGroups as $group)
                                <div class="border rounded p-3 mg-top-20">
                                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                                        <div>
                                            <strong>{{ $group->translate?->label ?? $group->key }}</strong>
                                            <span class="text-muted">({{ $group->key }} · {{ $optionFieldTypeLabels[$group->type] ?? $group->type }})</span>
                                            @if ($group->is_required)
                                                <span class="badge bg-primary">{{ __('translate.Required') }}</span>
                                            @endif
                                        </div>
                                        <form action="{{ route('admin.category-option-groups.destroy', $group->id) }}" method="POST" onsubmit="return confirm('{{ __('translate.Are you realy want to delete this item ?') }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="crancy-btn crancy-btn--danger">{{ __('translate.Delete') }}</button>
                                        </form>
                                    </div>

                                    @if ($group->type === 'select')
                                        <ul class="mg-top-15 mb-0">
                                            @foreach ($group->options->whereNull('parent_option_id') as $option)
                                                <li class="d-flex justify-content-between align-items-center py-1">
                                                    <span>{{ $option->translate?->name ?? $option->slug }}</span>
                                                    <form action="{{ route('admin.category-options.destroy', $option->id) }}" method="POST" class="d-inline" onsubmit="return confirm('{{ __('translate.Are you realy want to delete this item ?') }}')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-link text-danger p-0">{{ __('translate.Delete') }}</button>
                                                    </form>
                                                </li>
                                            @endforeach
                                        </ul>

                                        <form action="{{ route('admin.category-option-groups.options.store', $group->id) }}" method="POST" class="row g-2 mg-top-15">
                                            @csrf
                                            @if ($group->parent_group_id)
                                                @php
                                                    $parentOptions = \Modules\Category\Entities\CategoryOption::where('category_option_group_id', $group->parent_group_id)
                                                        ->whereNull('parent_option_id')
                                                        ->orderBy('sort_order')
                                                        ->with('translate')
                                                        ->get();
                                                @endphp
                                                <div class="col-md-4">
                                                    <select name="parent_option_id" class="form-select crancy__item-input" required>
                                                        <option value="">{{ __('translate.Parent group') }}</option>
                                                        @foreach ($parentOptions as $parentOption)
                                                            <option value="{{ $parentOption->id }}">{{ $parentOption->translate?->name ?? $parentOption->slug }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <input type="text" name="name" class="crancy__item-input" placeholder="{{ __('translate.Option name') }}" required>
                                                </div>
                                            @else
                                                <div class="col-md-8">
                                                    <input type="text" name="name" class="crancy__item-input" placeholder="{{ __('translate.Option name') }}" required>
                                                </div>
                                            @endif
                                            <div class="col-md-2">
                                                <input type="number" name="sort_order" class="crancy__item-input" placeholder="{{ __('translate.Sort') }}" min="0">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="submit" class="crancy-btn w-100">{{ __('translate.Add') }}</button>
                                            </div>
                                        </form>
                                        @if ($group->parent_group_id)
                                            <ul class="mg-top-10 mb-0 small text-muted">
                                                @foreach ($group->options->whereNotNull('parent_option_id') as $childOption)
                                                    <li>{{ $childOption->translate?->name }} ({{ __('translate.Parent group') }} #{{ $childOption->parent_option_id }})</li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    @endif
                                </div>
                            @endforeach

                            <hr class="mg-top-30">

                            <h5 class="mg-top-20">{{ __('translate.Add option group') }}</h5>
                            <form action="{{ route('admin.child-category.option-groups.store', $child_category->id) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="crancy__item-label">{{ __('translate.Label') }} *</label>
                                        <input type="text" name="label" class="crancy__item-input" required placeholder="{{ __('translate.Brand') }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="crancy__item-label">{{ __('translate.Key') }}</label>
                                        <input type="text" name="key" class="crancy__item-input" placeholder="brand">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="crancy__item-label">{{ __('translate.Type') }}</label>
                                        <select name="type" class="form-select crancy__item-input">
                                            <option value="select">{{ __('translate.Option field select') }}</option>
                                            <option value="text">{{ __('translate.Option field text') }}</option>
                                            <option value="number">{{ __('translate.Option field number') }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="crancy__item-label">{{ __('translate.Parent group') }}</label>
                                        <select name="parent_group_id" class="form-select crancy__item-input">
                                            <option value="">{{ __('translate.None') }}</option>
                                            @foreach ($optionGroups->whereNull('parent_group_id') as $rootGroup)
                                                <option value="{{ $rootGroup->id }}">{{ $rootGroup->translate?->label ?? $rootGroup->key }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2 mg-top-form-20">
                                        <label class="crancy__item-label">{{ __('translate.Sort') }}</label>
                                        <input type="number" name="sort_order" class="crancy__item-input" min="0" value="0">
                                    </div>
                                    <div class="col-md-4 mg-top-form-20">
                                        <label class="crancy__item-label d-block">{{ __('translate.Required') }}</label>
                                        <input type="checkbox" name="is_required" value="1">
                                    </div>
                                    <div class="col-md-4 mg-top-form-20">
                                        <label class="crancy__item-label d-block">{{ __('translate.Filterable') }}</label>
                                        <input type="checkbox" name="is_filterable" value="1" checked>
                                    </div>
                                    <div class="col-12 mg-top-20">
                                        <button type="submit" class="crancy-btn">{{ __('translate.Add option group') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>