@extends('layouts.app')

@section('content')
<div class="container-fluid px-4"> {{-- 項目が多いので container-fluid で横幅を広く使用 --}}
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="col-8 m-auto">
                {{ Breadcrumbs::render('csv.create.detail') }}
            </div>
            <!-- 上部：出力コントロールパネル -->
            <div class="card shadow mb-5 col-8 mx-auto">
                <div class="card-header fs-5 fw-bold">見積データエクスポート</div>
                <div class="card-body p-4">

                    @if (session('success'))
                        <div class="alert alert-success fs-5">{{ session('success') }}</div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger fs-5">{!! session('error') !!}</div>
                    @endif

                    <!-- 出力用フォーム (StreamedResponseでのダウンロードになるためGET推奨) -->
                    <form action="{{ route('csv.create.export') }}" method="GET" id="exportForm">
                        <div class="alert alert-secondary mb-4 fs-5 text-start">
                            現在、出力待ち（未出力）のデータが <strong>{{ number_format($totalCount ?? 0) }} 件</strong> あります。<br>
                            「データを出力する」ボタンを押すと、出力対象データのみダウンロードが開始されます。
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <button type="button" onclick="history.back();" class="btn btn-light border px-4 shadow-sm fs-5">戻る</button>
                            <button type="submit" id="exportBtn" class="btn btn-secondary px-5 shadow-sm fs-5 fw-bold" 
                                @if(($totalCount ?? 0) == 0) disabled @endif>
                                <i class="fas fa-file-csv me-2"></i> データを出力する
                            </button>
                        </div>
                    </form>

                </div>
            </div>

            <!-- 下部：出力予定データプレビュー -->
            @if(($results->count() ?? 0) > 0)
            <div class="card shadow mb-5">
                <div class="card-header fs-5 d-flex justify-content-between align-items-center">
                    <span>出力予定データ プレビュー（先頭 {{ $results->count() }} 件を表示中）</span>
                </div>
                <div class="card-body p-0"> {{-- p-0でテーブルをカードいっぱいに広げる --}}
                    <!-- 縦横スクロール＆ヘッダー固定 -->
                    <div class="table-responsive" style="max-height: 600px;">
                        <table class="table text-nowrap table-hover table-bordered mb-0">
                            <thead class="table-secondary text-center sticky-top" style="z-index: 1;">
                                <tr>
                                    <th scope="col">労働保険番号</th>
                                    <th scope="col">名称</th>
                                    <th scope="col">氏名</th>
                                    <th scope="col">郵便番号</th>
                                    <th scope="col">電話番号</th>
                                    <th scope="col">所在地１</th>
                                    <th scope="col">所在地２</th>
                                    <th scope="col">連絡窓口</th>
                                    <th scope="col">保険期間(from)</th>
                                    <th scope="col">保険期間(to)</th>
                                    <th scope="col">業種ｺｰﾄﾞ</th>
                                    <th scope="col">①基礎賃金総額</th>
                                    <th scope="col">特別加入者氏名①</th>
                                    <th scope="col">特別加入者日額①</th>
                                    <th scope="col">特別加入者氏名②</th>
                                    <th scope="col">特別加入者日額②</th>
                                    <th scope="col">特別加入者氏名③</th>
                                    <th scope="col">特別加入者日額③</th>
                                    <th scope="col">特別加入者氏名④</th>
                                    <th scope="col">特別加入者日額④</th>
                                    <th scope="col">特別加入者氏名⑤</th>
                                    <th scope="col">特別加入者日額⑤</th>
                                    <th scope="col">特別加入者氏名⑥</th>
                                    <th scope="col">特別加入者日額⑥</th>
                                    <th scope="col">特別加入者氏名⑦</th>
                                    <th scope="col">特別加入者日額⑦</th>
                                    <th scope="col">特別加入者氏名⑧</th>
                                    <th scope="col">特別加入者日額⑧</th>
                                    <th scope="col">特別加入者氏名⑨</th>
                                    <th scope="col">特別加入者日額⑨</th>
                                    <th scope="col">特別加入者氏名⑩</th>
                                    <th scope="col">特別加入者日額⑩</th>
                                    <th scope="col">特別加入者氏名⑪</th>
                                    <th scope="col">特別加入者日額⑪</th>
                                    <th scope="col">特別加入者氏名⑫</th>
                                    <th scope="col">特別加入者日額⑫</th>
                                    <th scope="col">②特別加入者保険料算定基礎合計</th>
                                    <th scope="col">③保険金算出の基礎賃金総額</th>
                                    <th scope="col">割引率</th>
                                    <th scope="col">海外派遣()</th>
                                    <th scope="col">総ｺﾝﾃﾞｰﾀ有り()</th>
                                    <th scope="col">総ｺﾝﾃﾞｰﾀ無し()</th>
                                    <th scope="col">作成資料()</th>
                                    <th scope="col">出力済()</th>
                                    <th scope="col">ⅠＡ</th>
                                    <th scope="col">ⅡＡ</th>
                                    <th scope="col">ⅢＡ</th>
                                    <th scope="col">ⅠＢ</th>
                                    <th scope="col">ⅡＢ</th>
                                    <th scope="col">ⅢＢ</th>
                                    <th scope="col">ⅠＡⅠＢ</th>
                                    <th scope="col">ⅡＡⅡＢ</th>
                                    <th scope="col">ⅢＡⅢＢ</th>
                                    <th scope="col">ⅠＢⅠＢ</th>
                                    <th scope="col">ⅡＢⅡＢ</th>
                                    <th scope="col">ⅢＢⅢＢ</th>
                                    <th scope="col">ⅠＡⅠＢⅠＢ</th>
                                    <th scope="col">ⅡＡⅡＢⅡＢ</th>
                                    <th scope="col">ⅢＡⅢＢⅢＢ</th>
                                    <th scope="col">ⅠＢⅠＢⅠＢ</th>
                                    <th scope="col">ⅡＢⅡＢⅡＢ</th>
                                    <th scope="col">ⅢＢⅢＢⅢＢ</th>
                                    <th scope="col">ⅠＡ</th>
                                    <th scope="col">ⅡＡ</th>
                                    <th scope="col">ⅢＡ</th>
                                    <th scope="col">ⅠＢ</th>
                                    <th scope="col">ⅡＢ</th>
                                    <th scope="col">ⅢＢ</th>
                                    <th scope="col">ⅠＡⅠＢ</th>
                                    <th scope="col">ⅡＡⅡＢ</th>
                                    <th scope="col">ⅢＡⅢＢ</th>
                                    <th scope="col">ⅠＢⅠＢ</th>
                                    <th scope="col">ⅡＢⅡＢ</th>
                                    <th scope="col">ⅢＢⅢＢ</th>
                                    <th scope="col">ⅠＡⅠＢⅠＢ</th>
                                    <th scope="col">ⅡＡⅡＢⅡＢ</th>
                                    <th scope="col">ⅢＡⅢＢⅢＢ</th>
                                    <th scope="col">ⅠＢⅠＢⅠＢ</th>
                                    <th scope="col">ⅡＢⅡＢⅡＢ</th>
                                    <th scope="col">ⅢＢⅢＢⅢＢ</th>
                                    <th scope="col">削除対象()</th>
                                    <th scope="col">登録年月日</th>
                                    <th scope="col">更新年月日</th>
                                </tr>
                            </thead>
                            <tbody class="table-group-divider">
                                @foreach ($results as $item)
                                    <tr>
                                        <!-- 上記で作成した mapRowData と同じ配列構造でデータが渡ってくる想定 -->
                                        @foreach ($item as $value)
                                            <td class="align-middle">{{ $value }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById('exportForm');
    const btn = document.getElementById('exportBtn');
    
    if (form && btn) {
        form.addEventListener('submit', function(e) {
            if(!confirm('CSV出力処理を開始します。よろしいですか？')) {
                e.preventDefault();
                return false;
            }

            // CSVダウンロードは少し時間がかかる＆画面遷移しないため、ボタンを一時的に無効化
            btn.disabled = true;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 処理中...';

            // ダウンロードが開始されたとみなして数秒後にボタンを元に戻し、リロードして件数を最新にする
            setTimeout(() => {
                btn.disabled = false;
                btn.innerHTML = originalText;
                
                // 必要に応じて画面をリロードし、表示件数（$totalCount）を更新する
                if(confirm('出力処理が完了しました。画面を更新して最新の状態にしますか？')) {
                    location.reload();
                }
            }, 5000); // 5秒後にボタン復活
        });
    }
});
</script>
@endsection