
<x-admin.card>
    <div class="alert alert-info border-0" role="alert">
        <i class="fas fa-info-circle me-1"></i>
        {{ __('admin/product-config-option-groups.dependencies_help') }}
    </div>

    @can('update product config option groups')
    <div class="border rounded p-3 mb-4">
        <h6 class="mb-3">{{ __('admin/product-config-option-groups.dependency_add_title') }}</h6>
        <form id="dependencyForm" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('admin/product-config-option-groups.dependency_source_option') }}</label>
                <select class="form-select form-select-sm" name="source_option_id" data-dep-source-option required></select>
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">{{ __('admin/product-config-option-groups.dependency_operator') }}</label>
                <select class="form-select form-select-sm" name="operator" data-dep-operator required>
                    <option value="equals">{{ __('admin/product-config-option-groups.dependency_op_equals') }}</option>
                    <option value="not_equals">{{ __('admin/product-config-option-groups.dependency_op_not_equals') }}</option>
                    <option value="in">{{ __('admin/product-config-option-groups.dependency_op_in') }}</option>
                    <option value="any">{{ __('admin/product-config-option-groups.dependency_op_any') }}</option>
                </select>
            </div>
            <div class="col-md-3" data-dep-value-wrapper>
                <label class="form-label small mb-1">{{ __('admin/product-config-option-groups.dependency_source_value') }}</label>
                <select class="form-select form-select-sm" name="source_value" data-dep-source-value></select>
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">{{ __('admin/product-config-option-groups.dependency_target_option') }}</label>
                <select class="form-select form-select-sm" name="target_option_id" data-dep-target-option required></select>
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">{{ __('admin/product-config-option-groups.dependency_action') }}</label>
                <select class="form-select form-select-sm" name="action" data-dep-action required>
                    <option value="show">{{ __('admin/product-config-option-groups.dependency_action_show') }}</option>
                    <option value="hide">{{ __('admin/product-config-option-groups.dependency_action_hide') }}</option>
                    <option value="require">{{ __('admin/product-config-option-groups.dependency_action_require') }}</option>
                    <option value="optional">{{ __('admin/product-config-option-groups.dependency_action_optional') }}</option>
                </select>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> {{ __('admin/product-config-option-groups.dependency_add_button') }}
                </button>
            </div>
        </form>
    </div>
    @endcan

    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th>{{ __('admin/product-config-option-groups.dependency_col_when') }}</th>
                    <th>{{ __('admin/product-config-option-groups.dependency_col_then') }}</th>
                    <th class="text-end" style="width: 80px;"></th>
                </tr>
            </thead>
            <tbody data-dep-list>
                <tr data-dep-empty>
                    <td colspan="3" class="text-center text-muted py-4">
                        {{ __('admin/product-config-option-groups.dependency_empty') }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</x-admin.card>
