@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.contract.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.contract.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">連絡窓口</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>
                                    <th scope="col">総コンデータ()</th>
                                    <th scope="col">資料作成()</th>
                                    <th scope="col">領収日1回目</th>
                                    <th scope="col">領収日2回目</th>
                                    <th scope="col">領収日3回目</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