@php
    $fiscalYear = \App\Services\Logic\User\Order\OrderAssist::getCurrentFiscalYear(baseDate: null, format: 'Y/m');
@endphp
<x-report.report-pivot :report="$report" :defs="$defs">

    {{-- search --}}
    <x-slot name="search">
        <div x-data="search" >
            <form id="search" method="POST" action="{{route('reports.data',['report'=>$report->id])}}" >
                @csrf
                <x-list.search >
                    <div class="search-grid">
                        <div>
                            <!-- | 売上年月 -->
                            <div>
                                <label>売上年月</label>
                                <div class="grid">
                                    <div class="flex items-center">
                                    {{-- from --}}
                                    <x-input.date_ym
                                        id="sales_date_ym_start"
                                        name="sales_date_ym_start"
                                        value="{{ $fiscalYear->start }}"
                                        data-peer="from"
                                        data-peer-target="#sales_date_ym_end"
                                    />
                                    <span>～</span>
                                    {{-- to --}}
                                    <x-input.date_ym
                                        id="sales_date_ym_end"
                                        name="sales_date_ym_end"
                                        value="{{ $fiscalYear->end }}"
                                        data-peer="to"
                                        data-peer-target="#sales_date_ym_start"
                                    />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- ｜アクション --}}
                    <x-slot name="action">
                        <x-button.reset id="btn_reset" />
                        <x-button.search id="btn_search" />
                    </x-slot>
                </x-list.search>
            </form>
        </div>
    </x-slot>

    {{-- script --}}
    <x-slot name="script">
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('search', List.search);
            Alpine.data('grid', () => {
                const gridData = Grid.pivot();
                const originalGetGridOptions = gridData.getGridOptions;
                const originalSetDef = gridData.setDef;

                // グループ行をデフォルト非表示にする
                gridData.showRowGroup = false;

                // フィルタ専用カラムを非表示にする
                gridData.setDef = function(response) {
                    if (response.coldef) {
                        const hiddenFields = ['product_code'];
                        response.coldef.forEach(col => {
                            if (hiddenFields.includes(col.field)) {
                                col.hide = true;
                            }
                        });
                    }
                    originalSetDef.call(this, response);
                };

                return {
                    ...gridData,

                    getGridOptions() {
                        const options = originalGetGridOptions.call(this);

                        // ピボット列（年月）を降順にする
                        options.pivotComparator = (a, b) => {
                            return b.toString().localeCompare(a.toString());
                        };

                        // サイドバーのフィルタパネルをデフォルトで開く
                        options.sideBar.defaultToolPanel = 'filters';

                        return options;
                    }
                };
            });
        });
        window.addEventListener('load', () => {
            // グループ行ラジオボタンのデフォルトを「表示しない」に設定
            const radioHide = document.querySelector('input[name="show_group"][value="9"]');
            if (radioHide) radioHide.checked = true;

            // 検索ボタン押下時
            if ($('#btn_search')) {
                $('#btn_search').addEventListener('click', (e) => {
                    Alpine.$data($('#grid')).search();
                });
            }
            // リセットボタン押下時
            if ($('#btn_reset')) {
                $('#btn_reset').addEventListener('click', (e) => {
                    document.getElementById('sales_date_ym_start').value = '{{ $fiscalYear->start }}';
                    document.getElementById('sales_date_ym_end').value = '{{ $fiscalYear->end }}';
                });
            }
        });
    </script>
    </x-slot>

</x-report.report-pivot>