@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            {{ Breadcrumbs::render('csv.association.index') }}
            <div class="card shadow mb-5">
                <div class="shadow-sm card-header fs-3 d-flex">
                    <span>代理店一括インポート</span>
                    <div style="margin:auto 0px auto auto">
                    <a class="fs-5 btn btn-secondary shadow-sm" href="{{ route('home') }}" >戻る</a>
                    </div>
                </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

                        <div class="mb-4">
                            <label for="csv_file" class="form-label fs-5 fw-bold">ファイルを選択してください</label>
                            <input form="import-form" class="form-control form-control-lg @error('csv_file') is-invalid @enderror shadow-sm " type="file" id="csv_file" name="csv_file" accept=".csv,.xlsx">
                            @error('csv_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text text-muted mt-2">
                                ※ファイルの文字コードは Shift-JIS または UTF-8 に対応しています。<br>
                                ※1行目はヘッダー（見出し）としてスキップされます。
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <form  id="del-form" action="{{ route('csv.association.delete') }}" method="GET" enctype="multipart/form-data">
                                @csrf
                                <button type="submit" class="btn btn-light border px-4 shadow-sm" onclick="return confirm('本当に破棄しますか？')">取込予定データ破棄</button>
                            </form>
                            <form  id="import-form" action="{{ route('csv.association.insert') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <button type="submit" class="btn btn-secondary px-5 shadow-sm fs-5" onclick="return confirm('本当にインポートを実行しますか？')">インポート開始</button>
                            </form>
                        </div>

                </div>
            </div>
        @if(($results->count() ?? 0) > 0)
            <div class="card shadow mb-5">
                <div class="card-body text-center">
        <!-- 一時テーブルにデータがある場合のみ本反映ボタンを表示 -->
                <form action="{{ route('csv.association.commit') }}" method="POST" id="commitForm">
                    @csrf
                    <div id="alertArea" class="alert alert-warning mb-3 text-start">
                        現在一時保存されているデータが <strong>{{ number_format($results->count()) }} 件</strong> あります。「本番テーブルへ反映する」を押すとバックグラウンドで移行が開始されます。
                    </div>
                    <button type="submit" id="commitBtn" class="btn btn-secondary btn-lg fw-bold px-5 shadow">
                        本番テーブルへ反映する
                    </button>
                </form>

                <!-- 進捗バー（最初は非表示） -->
                <div id="progressArea" class="mt-4 d-none">
                    <div class="fw-bold text-success mb-2 fs-5" id="progressText">移行準備中...</div>
                    <div class="progress" style="height: 30px;">
                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                            style="width: 0%; font-weight: bold; font-size: 1.1rem;">0%</div>
                    </div>
                </div>
            </div>
        </div>
        @endif
<!-- JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById('commitForm');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            // ボタンの連打防止とエリア切り替え
            document.getElementById('commitBtn').disabled = true;
            document.getElementById('alertArea').classList.add('d-none');
            document.getElementById('progressArea').classList.remove('d-none');

            // 2秒おきに進捗をサーバーに問い合わせ
            const intervalId = setInterval(() => {
                fetch("{{ route('csv.association.progress') }}")
                    .then(res => res.json())
                    .then(data => {
                        const bar = document.getElementById('progressBar');
                        const text = document.getElementById('progressText');

                        if (data.status === 'processing') {
                            let percent = data.total > 0 ? Math.round((data.processed / data.total) * 100) : 0;
                            bar.style.width = percent + '%';
                            bar.innerText = percent + '%';
                            text.innerText = `データ移行中... (${data.processed.toLocaleString()} / ${data.total.toLocaleString()} 件)`;
                        } else if (data.status === 'completed') {
                            clearInterval(intervalId);
                            bar.style.width = '100%';
                            bar.innerText = '100%';
                            text.innerText = '✨ すべてのデータ移行が完了しました！画面をリロードします...';
                            setTimeout(() => location.reload(), 1500);
                        } else if (data.status === 'failed') {
                            clearInterval(intervalId);
                            text.innerText = '❌ 移行中にエラーが発生しました。Laravelのログ(storage/logs/)を確認してください。';
                            bar.classList.replace('bg-success', 'bg-danger');
                        }
                    })
                    .catch(error => {
                        console.error('Progress Fetch Error:', error);
                    });
            }, 2000);
        });
    }
});
</script>
            <div class="card shadow">
                <div class="card-header fs-5">取込予定データ</div>
                <div class="card-body p-4">
                    <div class="table-responsive">
                        <table class="table text-nowrap table-hover">
                            <thead>
                                <tr class="table-secondary text-center">
                                    <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">

                            @forelse ($results->take(100) as $item)
                                <tr style="cursor: pointer;">
                                    <td class="align-middle">{{$item['association_id']}}</td>
                                    <td class="align-middle">{{$item['hoken']}}</td>
                                    <td class="align-middle">{{$item['LINumber']}}</td>
                                    <td class="align-middle">{{$item['workspace']}}</td>
                                    <td class="align-middle">{{$item['post_code']}}</td>
                                    <td class="align-middle">{{$item['address1']}}</td>
                                    <td class="align-middle">{{$item['address2']}}</td>
                                    <td class="align-middle">{{$item['tel']}}</td>
                                    <td class="align-middle">{{$item['fax']}}</td>
                                    <td class="align-middle">{{$item['owner']}}</td>
                                    <td class="align-middle">{{$item['o_furi']}}</td>
                                    <td class="align-middle">{{$item['ownerBirthday']}}</td>
                                    <td class="align-middle">{{$item['ownergender']}}</td>
                                    <td class="align-middle">{{$item['target_num']}}</td>
                                    <td class="align-middle">{{$item['email']}}</td>
                                    <td class="align-middle">{{$item['parent_org_cbn']}}</td>
                                    <td class="align-middle">{{$item['biko']}}</td>
                                    <td class="align-middle">{{$item['number']}}</td>
                                    <td class="align-middle">{{$item['create_date']}}</td>
                                    <td class="align-middle">{{$item['cbn']}}</td>
                                    <td class="align-middle">{{$item['free1']}}</td>
                                    <td class="align-middle">{{$item['free2']}}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center py-4 text-muted">
                                        データが見つかりませんでした。
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection