{{--表アクション（モニタリスト（営業部）／report_id=28 専用）--}}
{{-- 共通の components.report.parts.grid-actions に「Excel出力(A4)」を追加したもの --}}

{{--｜再読込ボタン--}}
<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" />

{{--｜Excel出力(A4)ボタン--}}
<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]" />

{{-- 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>と重複するため削除 */ --}}
        });

        // 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 = 'monitor_sales_list_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;
            }
        });
    });
</script>