@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="">
                {{ Breadcrumbs::render('amendment.fluctuation.entry',$app->application_id) }}
                <div class="shadow card">
                    <div class="shadow-sm card-header fs-3">労保連労働災害保険契約内容異動届(異動)画面</div>
                    <form id="entryForm" method="POST" action="{{ route('amendment.fluctuation.confirm',$app->application_id) }}">
                        @csrf
                        <div class="card-body">
                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li class="fs-6 text-danger">{{ $error }}</li>
                                @endforeach
                            </ul>
                            @php
                                $LIN = explode('-', $app->LINumber);
                                $postcode = explode('-', $ins->post_code);
                                $tels = explode('-', $ins->tel);
                                $ad = $ins->address1 . $ins->address2;
                            @endphp
                            <div class="shadow-sm input-group mb-3">
                                <span class="input-group-text bg-secondary-subtle fs-5">労働保険番号</span>
                                <div class="form-floating">
                                    <span class="form-control fs-5 bg-gray">{{ $LIN[0] }}</span>
                                    <label for="floatingInput1">府県</label>
                                </div>
                                <div class="form-floating" style="width: 70px;flex: none;">
                                    <input type="text" class="form-control fs-5"
                                        name="remit" id="floatingInput2" maxlength="1" value="*"
                                        placeholder="9" disabled>
                                    <label for="floatingInput2">所掌</label>
                                </div>
                                <div class="form-floating" style="width: 70px;flex: none;">
                                    <input type="text"
                                        class="form-control fs-5"
                                        name="jurisdiction" id="floatingInput3" maxlength="2"
                                        value="**" placeholder="99" disabled>
                                    <label for="floatingInput3">管轄</label>
                                </div>
                                <div class="form-floating col-2">
                                    <span class="form-control fs-5 bg-gray">{{ $LIN[1] }}</span>
                                    <label for="floatingInput4">基幹番号</label>
                                </div>
                                <div class="form-floating">
                                    <span class="form-control fs-5 bg-gray">{{ $LIN[2] }}</span>
                                    <label for="floatingInput5">枝番号</label>
                                </div>
                                <div class="form-floating" style="width: 70px;flex: none;">
                                    <span class="form-control fs-5 bg-gray">{{ $LIN[3] }}</span>
                                    <label for="floatingInput6">追番</label>
                                </div>
                            </div>
                            <div class="shadow-sm input-group mb-3">
                                <span class="input-group-text bg-secondary-subtle fs-5">事業場の名称</span>
                                    <span class="form-control fs-5 bg-gray">{{ $ins->workspace }}</span>
                            </div>
                            <div class="d-flex">
                                <div class="col-6">
                                    <div class="shadow-sm input-group mb-3">
                                        <span class="input-group-text bg-secondary-subtle fs-5">事業主の氏名</span>
                                    <span class="form-control fs-5 bg-gray">{{ $ins->name }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex">
                                <div class="col-4">
                                    <div class="shadow-sm input-group mb-3">
                                        <span class="input-group-text bg-secondary-subtle fs-5">郵便番号</span>
                                        <span class="form-control fs-5 bg-gray">{{ $postcode[0] }}</span>
                                        <span class="input-group-text bg-secondary-subtle">―</span>
                                        <span class="form-control fs-5 bg-gray">{{ $postcode[1] }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="shadow-sm input-group mb-3 ms-1">
                                        <span class="input-group-text bg-secondary-subtle fs-5">電話番号</span>
                                        <span class="form-control fs-5 bg-gray">{{ $tels[0] }}</span>
                                        <span class="input-group-text bg-secondary-subtle">―</span>
                                        <span class="form-control fs-5 bg-gray">{{ $tels[1] }}</span>
                                        <span class="input-group-text bg-secondary-subtle">―</span>
                                        <span class="form-control fs-5 bg-gray">{{ $tels[2] }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="shadow-sm input-group mb-3">
                                <span class="input-group-text bg-secondary-subtle fs-5">事業場の所在地</span>
                                <span class="form-control fs-5 bg-gray">{{ $ad }}</span>
                            </div>
                            <div class="d-flex">
                                <div class="col-4">
                                    <div class="shadow-sm input-group mb-3">
                                        <span class="input-group-text bg-secondary-subtle fs-5">異動日</span>
                                        <input type="date" value="{{ old('date') }}" id="date" name="date" class="form-control fs-5 @error('date') is-invalid @enderror">
                                    </div>
                                </div>
                            </div>
                            <div class="shadow-sm input-group mb-3">
                                <span class="input-group-text bg-secondary-subtle fs-5">事業コード</span>
                                <select id="code" name="code"
                                    class="form-control fs-5 @error('code') is-invalid @enderror"
                                    onchange="inputChange()" required>
                                    <option value="">変更なし</option>
                                    <option value="02" {{ old('code') == '02' ? 'selected' : '' }}>02</option>
                                    <option value="03" {{ old('code') == '03' ? 'selected' : '' }}>03</option>
                                    <option value="11" {{ old('code') == '11' ? 'selected' : '' }}>11</option>
                                    <option value="12" {{ old('code') == '12' ? 'selected' : '' }}>12</option>
                                    <option value="21" {{ old('code') == '21' ? 'selected' : '' }}>21</option>
                                    <option value="23" {{ old('code') == '23' ? 'selected' : '' }}>23</option>
                                    <option value="24" {{ old('code') == '24' ? 'selected' : '' }}>24</option>
                                    <option value="25" {{ old('code') == '25' ? 'selected' : '' }}>25</option>
                                    <option value="26" {{ old('code') == '26' ? 'selected' : '' }}>26</option>
                                    <option value="31" {{ old('code') == '31' ? 'selected' : '' }}>31</option>
                                    <option value="32" {{ old('code') == '32' ? 'selected' : '' }}>32</option>
                                    <option value="33" {{ old('code') == '33' ? 'selected' : '' }}>33</option>
                                    <option value="34" {{ old('code') == '34' ? 'selected' : '' }}>34</option>
                                    <option value="35" {{ old('code') == '35' ? 'selected' : '' }}>35</option>
                                    <option value="36" {{ old('code') == '36' ? 'selected' : '' }}>36</option>
                                    <option value="37" {{ old('code') == '37' ? 'selected' : '' }}>37</option>
                                    <option value="38" {{ old('code') == '38' ? 'selected' : '' }}>38</option>
                                    <option value="41" {{ old('code') == '41' ? 'selected' : '' }}>41</option>
                                    <option value="42" {{ old('code') == '42' ? 'selected' : '' }}>42</option>
                                    <option value="44" {{ old('code') == '44' ? 'selected' : '' }}>44</option>
                                    <option value="45" {{ old('code') == '45' ? 'selected' : '' }}>45</option>
                                    <option value="46" {{ old('code') == '46' ? 'selected' : '' }}>46</option>
                                    <option value="47" {{ old('code') == '47' ? 'selected' : '' }}>47</option>
                                    <option value="48" {{ old('code') == '48' ? 'selected' : '' }}>48</option>
                                    <option value="49" {{ old('code') == '49' ? 'selected' : '' }}>49</option>
                                    <option value="50" {{ old('code') == '50' ? 'selected' : '' }}>50</option>
                                    <option value="51" {{ old('code') == '51' ? 'selected' : '' }}>51</option>
                                    <option value="52" {{ old('code') == '52' ? 'selected' : '' }}>52</option>
                                    <option value="53" {{ old('code') == '53' ? 'selected' : '' }}>53</option>
                                    <option value="54" {{ old('code') == '54' ? 'selected' : '' }}>54</option>
                                    <option value="55" {{ old('code') == '55' ? 'selected' : '' }}>55</option>
                                    <option value="56" {{ old('code') == '56' ? 'selected' : '' }}>56</option>
                                    <option value="57" {{ old('code') == '57' ? 'selected' : '' }}>57</option>
                                    <option value="58" {{ old('code') == '58' ? 'selected' : '' }}>58</option>
                                    <option value="59" {{ old('code') == '59' ? 'selected' : '' }}>59</option>
                                    <option value="60" {{ old('code') == '60' ? 'selected' : '' }}>60</option>
                                    <option value="61" {{ old('code') == '61' ? 'selected' : '' }}>61</option>
                                    <option value="62" {{ old('code') == '62' ? 'selected' : '' }}>62</option>
                                    <option value="63" {{ old('code') == '63' ? 'selected' : '' }}>63</option>
                                    <option value="64" {{ old('code') == '64' ? 'selected' : '' }}>64</option>
                                    <option value="66" {{ old('code') == '66' ? 'selected' : '' }}>66</option>
                                    <option value="71" {{ old('code') == '71' ? 'selected' : '' }}>71</option>
                                    <option value="72" {{ old('code') == '72' ? 'selected' : '' }}>72</option>
                                    <option value="73" {{ old('code') == '73' ? 'selected' : '' }}>73</option>
                                    <option value="74" {{ old('code') == '74' ? 'selected' : '' }}>74</option>
                                    <option value="81" {{ old('code') == '81' ? 'selected' : '' }}>81</option>
                                    <option value="90" {{ old('code') == '90' ? 'selected' : '' }}>90</option>
                                    <option value="91" {{ old('code') == '91' ? 'selected' : '' }}>91</option>
                                    <option value="93" {{ old('code') == '93' ? 'selected' : '' }}>93</option>
                                    <option value="94" {{ old('code') == '94' ? 'selected' : '' }}>94</option>
                                    <option value="95" {{ old('code') == '95' ? 'selected' : '' }}>95</option>
                                    <option value="96" {{ old('code') == '96' ? 'selected' : '' }}>96</option>
                                    <option value="97" {{ old('code') == '97' ? 'selected' : '' }}>97</option>
                                    <option value="98" {{ old('code') == '98' ? 'selected' : '' }}>98</option>
                                    <option value="99" {{ old('code') == '99' ? 'selected' : '' }}>99</option>
                                </select>
                                <span class="input-group-text col-9 bg-secondary-subtle fs-5" id="code_label">未選択</span>
                            </div>
                            <div class="d-flex">
                                <div class="col-12">
                                    <div class="shadow-sm input-group mb-3">
                                        <span class="input-group-text bg-secondary-subtle fs-5">賃金総額の変更</span>
                                        <select id="pwa_flg" name="pwa_flg" class="form-control fs-5" onchange="kChange()">
                                            <option value="0" {{ old('pwa_flg',0) == 0 ? 'selected' : '' }}>変更なし</option>
                                            <option value="50" {{ old('pwa_flg') == 50 ? 'selected' : '' }}>現保険契約の賃金総額に比べ100分の50以下の変動が見込まれる場合</option>
                                            <option value="200" {{ old('pwa_flg') == 200 ? 'selected' : '' }}>現保険契約の賃金総額に比べ100分の200以上の変動が見込まれる場合</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div id="pwa-area" class="d-none">
                                <div class="d-flex">
                                    <div class="shadow-sm input-group mb-3 ms-1">
                                        <span class="input-group-text col-5 bg-secondary-subtle fs-5">現保険契約の賃金総額</span>
                                        <span class="input-group-text col-5 fs-5 bg-gray">{{$ads->pcb_wt_amount}}</span>
                                        <span class="input-group-text col-2 bg-secondary-subtle fs-5">千円</span>
                                    </div>
                                    <div class="shadow-sm input-group mb-3 ms-1">
                                        <span class="input-group-text bg-secondary-subtle fs-5">変動後の賃金総額</span>
                                        <input type="number" value="{{ old('pwa') }}" id="pwa" name="pwa" class="form-control fs-5 @error('pwa') is-invalid @enderror">
                                        <span class="input-group-text bg-secondary-subtle fs-5">千円</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-8 m-auto">
                                <span class="input-group-text bg-secondary-subtle fs-5 mb-3">特別加入者の変更</span>
                                <div class="mb-3 d-flex gap-2">
                                    <button type="button" class="btn btn-outline-secondary" onclick="downloadSepsCSV()">CSVダウンロード</button>
                                    
                                    <label class="btn btn-outline-secondary mb-0">
                                        CSV取込（プレビュー）
                                        <input type="file" id="csvFileInput" accept=".csv" style="display: none;">
                                    </label>
                                </div>
                                <input type="hidden" name="seps_json" id="sepsJson">
                                <table class="table" id="sepsTable">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">特別加入者</th>
                                            <th scope="col">給付基礎日額</th>
                                            <th scope="col">加入日</th>
                                            <th scope="col">脱退日</th>
                                            <th scope="col">0:変更なし/1:加入/2:脱退</th>
                                            <th class="border-start d-none" scope="col">保険料算定基礎額</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-group-divider">
                                        @foreach ( $seps as $sep)
                                        <tr>
                                        <th scope="row">{{ $sep->no }}</th>
                                        <td>{{ $sep->name }}</td>
                                        <td>{{ number_format($sep->value) }}</td>
                                        <td>{{ Carbon\Carbon::parse($sep->start_date)->format('Y/m/d') }}</td>
                                        <td>{{ Carbon\Carbon::parse($sep->end_date)->format('Y/m/d') }}</td>
                                        <td>0</td>
                                        <td class="border-start">{{ number_format(Carbon\Carbon::parse($sep->start_date)->diffInDays($sep->end_date) * $sep->value) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex">
                                <a href="{{ route('home') }}" class="fs-5 btn btn-secondary shadow-sm">一覧に戻る</a>
                                <button type="button" class="fs-5 btn btn-secondary shadow-sm"  onClick="submitAfterValidate();"
                                    style="margin:auto 0px auto auto">確認する</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
    <style>
        label:has(input[type="radio"]:checked) {
            background: #86b7fe;
        }
        span.bg-gray{
            background-color: var(--bs-secondary-bg);
        }
    </style>
    <script>
    const ary = [
        @foreach ($ind as $i)
            {
                industry_id: '{{ sprintf('%02d', $i->industry_id) }}',
                name: '{{ $i->name }}',
            },
        @endforeach
    ];

    // --- 日数差 × 給付基礎日額 の計算関数 ---
    function calculateInsuranceAmount(startDateStr, endDateStr, valueStr) {
        try {
            if (!startDateStr || !endDateStr || !valueStr) return '0';

            // ハイフン区切りに統一して Date オブジェクト化
            const start = new Date(startDateStr.trim().replace(/\//g, '-'));
            const end = new Date(endDateStr.trim().replace(/\//g, '-'));
            const value = Number(String(valueStr).replace(/,/g, ''));

            if (isNaN(start.getTime()) || isNaN(end.getTime()) || isNaN(value)) {
                return '0';
            }

            // 日数差の計算 (ミリ秒 -> 日数)
            const diffTime = end.getTime() - start.getTime();
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

            if (diffDays <= 0) return '0';

            // (日数 × 給付基礎日額) をカンマ区切りにして返す
            return (diffDays * value).toLocaleString();
        } catch (e) {
            console.error('計算エラー:', e);
            return '0';
        }
    }

    // CSVダウンロード処理 (先頭6列のみ)
    function downloadSepsCSV() {
        const table = document.getElementById('sepsTable');
        if (!table) return;

        let csvLines = [];
        for (let row of table.rows) {
            let cells = Array.from(row.cells).slice(0, 6).map(cell => {
                let text = cell.innerText.trim().replace(/,/g, '');
                return `"${text.replace(/"/g, '""')}"`;
            });
            csvLines.push(cells.join(','));
        }

        const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
        const blob = new Blob([bom, csvLines.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = '特別加入者異動.csv';
        link.click();
    }

    function submitAfterValidate() {
        updateHiddenJson();
        const form = document.getElementById('entryForm');
        form.submit();
    }

    function inputChange() {
        const code = document.getElementById('code');
        const label = document.getElementById('code_label');
        if (!code || !label) return;

        const items = ary.find(v => v.industry_id === code.value);
        label.innerHTML = items ? items.name : '未選択';
    }

    function updateHiddenJson() {
        const rows = document.querySelectorAll('#sepsTable tbody tr');
        const data = [];

        rows.forEach(row => {
            const cells = row.querySelectorAll('th, td');
            if (cells.length >= 6) {
                data.push({
                    no: cells[0].innerText.trim(),
                    name: cells[1].innerText.trim(),
                    value: cells[2].innerText.trim().replace(/,/g, ''),
                    start_date: cells[3].innerText.trim(),
                    end_date: cells[4].innerText.trim(),
                    status_flag: cells[5].innerText.trim()
                });
            }
        });

        const jsonInput = document.getElementById('sepsJson');
        if (jsonInput) {
            jsonInput.value = JSON.stringify(data);
        }
    }

    function escapeHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    // --- DOM描画完了後のイベント登録 ---
    document.addEventListener('DOMContentLoaded', function () {
        inputChange();

        const csvInput = document.getElementById('csvFileInput');
        if (csvInput) {
            csvInput.addEventListener('change', function (e) {
                const file = e.target.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.readAsText(file, 'UTF-8');

                reader.onload = function (event) {
                    const lines = event.target.result.split(/\r\n|\n/).filter(line => line.trim() !== '');
                    if (lines.length <= 1) return;

                    const expectedHeaders = [
                        '#', 
                        '特別加入者', 
                        '給付基礎日額', 
                        '加入日', 
                        '脱退日', 
                        '0:変更なし/1:加入/2:脱退'
                    ];
                    const headers = lines[0].split(',').map(col => col.replace(/^"|"$/g, '').trim());

                    let isHeaderValid = true;
                    if (headers.length < expectedHeaders.length) {
                        isHeaderValid = false;
                    } else {
                        for (let i = 0; i < expectedHeaders.length; i++) {
                            if (headers[i] !== expectedHeaders[i]) {
                                isHeaderValid = false;
                                break;
                            }
                        }
                    }
                    if (!isHeaderValid) {
                        alert("【エラー】CSVのヘッダーの項目名または順番が異なります。\n指定されたフォーマットのCSVを取り込んでください。");
                        e.target.value = '';
                        return;
                    }

                    let errorMessages = [];
                    let parsedRows = [];

                    for (let i = 1; i < lines.length; i++) {
                        const cols = lines[i].split(',').map(col => col.replace(/^"|"$/g, '').trim());
                        if (cols.length < 6) continue;

                        let rowNum = i + 1;
                        
                        if (!/^\d+$/.test(cols[0])) {
                            errorMessages.push(`${rowNum}行目: 「#」は半角数字で入力してください。`);
                        }
                        if (cols[1] === '') {
                            errorMessages.push(`${rowNum}行目: 「特別加入者」が未入力です。`);
                        }
                        let priceValue = cols[2].replace(/,/g, '');
                        const allowedDailyAmounts = [
                            3500, 4000, 5000, 6000, 7000, 8000, 9000, 10000,
                            12000, 14000, 16000, 18000, 20000, 22000, 24000, 25000
                        ];

                        if (priceValue === '' || isNaN(priceValue) || !/^\d+$/.test(priceValue)) {
                            errorMessages.push(`${rowNum}行目: 「給付基礎日額」は半角数字で入力してください。`);
                        } else {
                            // 文字列を数値に変換してチェック
                            let numericPrice = Number(priceValue);
                            if (!allowedDailyAmounts.includes(numericPrice)) {
                                errorMessages.push(`${rowNum}行目: 「給付基礎日額」は規定の金額（3500〜25000の間の特定額）で入力してください。（入力値: ${priceValue}）`);
                            }
                        }
                        const datePattern = /^(\d{4}[/-]\d{1,2}[/-]\d{1,2})?$/; 
                        if (!datePattern.test(cols[3])) {
                            errorMessages.push(`${rowNum}行目: 「加入日」の形式が正しくありません (YYYY/MM/DD)。`);
                        }
                        if (!datePattern.test(cols[4])) {
                            errorMessages.push(`${rowNum}行目: 「脱退日」の形式が正しくありません (YYYY/MM/DD)。`);
                        }
                        if (!/^[012]$/.test(cols[5])) {
                            errorMessages.push(`${rowNum}行目: 「0:変更なし/1:加入/2:脱退」は 0, 1, 2 のいずれかを入力してください。`);
                        }

                        parsedRows.push(cols);
                    }

                    if (errorMessages.length > 0) {
                        let alertMsg = "【データエラー】\nCSVの内容に誤りがあります。\n\n" + errorMessages.slice(0, 5).join('\n');
                        if (errorMessages.length > 5) {
                            alertMsg += `\n...他 ${errorMessages.length - 5} 件のエラー`;
                        }
                        alert(alertMsg);
                        e.target.value = '';
                        return;
                    }

                    // テーブル描画
                    const tbody = document.querySelector('#sepsTable tbody');
                    tbody.innerHTML = ''; 

                    parsedRows.forEach(cols => {
                        // 7列目「保険料算定基礎額」の動的計算
                        //const calcVal = calculateInsuranceAmount(cols[3], cols[4], cols[2]);
                        const calcVal = cols[2] * 365;
                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <th scope="row">${escapeHtml(cols[0])}</th>
                            <td>${escapeHtml(cols[1])}</td>
                            <td>${escapeHtml(Number(cols[2]).toLocaleString())}</td>
                            <td>${escapeHtml(cols[3])}</td>
                            <td>${escapeHtml(cols[4])}</td>
                            <td>${escapeHtml(cols[5])}</td>
                            <td class="d-none">${escapeHtml(calcVal)}</td>
                        `;
                        tbody.appendChild(tr);
                    });

                    updateHiddenJson();
                    alert('CSVを取り込みました。確認後「確認する」ボタンを押してください。');
                };
                
                e.target.value = '';
            });
        }
    });
    function kChange() {
        const pwa_flg = document.getElementById('pwa_flg');
        const ra = document.getElementById('pwa-area');
        const pwa = document.getElementById("pwa");
        if (pwa_flg.value != 0) {
            ra.classList.add('d-block');
            ra.classList.remove('d-none');
            pwa.value = '';
        } else {
            ra.classList.add('d-none');
            ra.classList.remove('d-block');
            pwa.value = '';
        }
    }
    kChange()
</script>
@endsection