{{--表アクション--}}

{{--｜再読込ボタン--}}
<x-button.report-reload id="btn_reload"  @click="location.reload()"/>

{{--｜列設定リセットボタン--}}
<x-button.sub id="btn_clear_col" text="列設定リセット"
    icon="fa-solid fa-eraser text-xs mr-0.5"
    shape="btn-table btn-light text-xs py-[0.1875rem]" />

{{--｜EXCEL出力ボタン--}}
<x-button.report-excel id="btn_export" @click="excel" />

@if ($report->id == 34)
{{--｜Excel出力(A4)ボタン (report_id=34 のみ) --}}
<x-button.sub id="btn_export_a4" text="Excel出力(A4)"
    icon="fa-solid fa-file-excel text-xs mr-0.5"
    shape="btn-table btn-tertiary text-xs py-[0.1875rem]" />

{{--｜入荷予定 全行表示トグル (report_id=34 のみ) --}}
<label for="toggle_arrival_full"
    class="ml-4 flex items-center gap-1 text-sm cursor-pointer select-none">
    <input type="checkbox" id="toggle_arrival_full" class="input-check">
    <span>入荷予定を全行表示</span>
</label>
@endif

{{-- script --}}
<script>

    window.addEventListener('load', () => {

        // 再読込ボタン押下時
        $('#btn_reload').addEventListener('click', (e) => {
            location.reload();
        });
        // 列設定リセットボタン押下時
        $('#btn_clear_col').addEventListener('click', (e) => {
            Alpine.$data($('#grid')).clearColumnState();
        });
        // EXCEL出力ボタン押下時
        $('#btn_export').addEventListener('click', (e) => {
            //Alpine.$data($('#grid')).excel();     {{-- /* <x-button.report-excel>と重複するため削除 */ --}}
        });

@if ($report->id == 34)
        // Excel出力(A4)ボタン押下時
        // fetch でPOSTしてBlobとして受け取り、ダウンロード完了タイミングでオーバーレイを閉じる
        $('#btn_export_a4').addEventListener('click', async (e) => {
            const search = $('#search');
            if (!search) return;
            const btn = $('#btn_export_a4');

            // ローディング開始（共通オーバーレイを使用）
            Action.onLoading(true);
            btn.disabled = true;

            try {
                const response = await fetch(
                    '{{ route("reports.excel-a4", ["report" => $report->id]) }}',
                    {
                        method: 'POST',
                        body: new FormData(search),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    }
                );
                if (!response.ok) {
                    throw new Error('HTTP ' + response.status);
                }

                // Content-Dispositionからファイル名を抽出（UTF-8エンコードを優先）
                const cd = response.headers.get('Content-Disposition') || '';
                let filename = 'backorder_a4.xlsx';
                const utf8Match = cd.match(/filename\*=UTF-8''([^;]+)/i);
                const plainMatch = cd.match(/filename="([^"]+)"/);
                if (utf8Match) {
                    try { filename = decodeURIComponent(utf8Match[1]); } catch (_) {}
                } else if (plainMatch) {
                    filename = plainMatch[1];
                }

                // Blobとして取得 → 一時リンクでダウンロードを発火
                const blob = await response.blob();
                const objUrl = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = objUrl;
                link.download = filename;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(objUrl);
            } catch (err) {
                alert('Excel出力(A4)に失敗しました: ' + err.message);
            } finally {
                // ローディング終了
                Action.onLoading(false);
                btn.disabled = false;
            }
        });

        // 入荷予定 全行表示トグル押下時
        // ON:  arrival_*_full を表示 / arrival_*_display を非表示
        // OFF: arrival_*_full を非表示 / arrival_*_display を表示
        $('#toggle_arrival_full').addEventListener('change', (e) => {
            const api = Alpine.$data($('#grid')).gridApi;
            if (!api) return;
            const on = e.target.checked;
            api.setColumnsVisible(['arrival_qty_full', 'arrival_date_full'], on);
            api.setColumnsVisible(['arrival_qty_display', 'arrival_date_display'], !on);
        });
@endif
    });
</script>