{{--｜グループ行アクション--}}
@if($report->hasRowGroup)

    {{--｜- グループ行表示 --}}
    @php($items = [
        (object)['value'=>'1', 'name'=>'表示する'],
        (object)['value'=>'9', 'name'=>'表示しない']])
    <div class="ml-1 border-l-2 pl-2 flex item-center gap-2">
        <span>グループ行：</span>
        <x-input.radios name="show_group" value="1" :items="$items" :border="true" class="bg-white/50"/>
    </div>
    {{--｜- 展開レベル選択 --}}
    <div id="expand" class="ml-1 border-l-2 pl-2 flex item-center gap-2">
        {{--
        <x-button.sub id="btn_expand" text="全展開" @click="expand(true)"
            icon="fa-solid fa-plus text-xs mr-0.5" />
        <x-button.sub id="btn_collapse" text="全格納" @click="expand(false)"
            icon="fa-solid fa-minus text-xs mr-0.5" />
        --}}
        <span>展開レベル：</span>
        <select id="level" class="input-select"">
            <option value="">---</option>
            @foreach($report->rowGroup as $level => $name)
            <option value="{{$level}}">{{$name}}</option>
            @endforeach
        </select>
    </div>

    {{-- script --}}
    <script>
        window.addEventListener('load', () => {
            // グループ行表示切替時
            $all('input[name="show_group"]').forEach (el => {
                el.addEventListener('change', (e) => {
                    const show = ($('input[name="show_group"]:checked').value == '1');
                    Alpine.$data($('#grid')).showGroup(show);
                    Action.toggle($('#expand'), show);
                });
            });
            // 展開レベル選択時 
            $('#level').addEventListener('change', (e) => {
                const level = $('#level').value;
                Alpine.$data($('#grid')).collapseLevel(level);
            });
        });
    </script>

@endif