@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                {{ Breadcrumbs::render('transfer.index',$app->application_id) }}
                @if (session('status'))
                    <div class="alert alert-success" role="alert">
                {{ session('status') }}
                </div>
                @endif
                <div class="shadow card">
                    <div class="shadow-sm card-header fs-3 d-flex">
                        <span>入金管理画面</span>
                        <div style="margin:auto 0px auto auto">
                        <button class="ms-1 fs-5 btn btn-secondary shadow-sm" onclick="history.back();">戻る</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <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">{{ $ins->workspace }}</span>
                        </div>
                        @php
                        $liParts = explode('-', $app->LINumber);
                        @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">{{ $liParts[0] }}</span>
                                <label for="floatingInput1">府県</label>
                            </div>
                            <div class="form-floating">
                                <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">
                                <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">
                                <input type="text"
                                    class="form-control fs-5"
                                    name="core_number" id="floatingInput4" maxlength="6"
                                    value="{{ $liParts[1] }}" placeholder="999999" disabled>
                                <label for="floatingInput4">基幹番号</label>
                            </div>
                            <div class="form-floating">
                                <input type="text"
                                    class="form-control fs-5"
                                    name="branch_number" id="floatingInput5" maxlength="3"
                                    value="{{ $liParts[2] }}" placeholder="999" disabled>
                                <label for="floatingInput5">枝番号</label>
                            </div>
                            <div class="form-floating">
                                <input type="text"
                                    class="form-control fs-5"
                                    name="serial_number" id="floatingInput6" maxlength="2"
                                    value="{{ $liParts[3] }}" placeholder="99" disabled>
                                <label for="floatingInput6">追番</label>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="shadow-sm input-group mb-3">
                                <span class="input-group-text bg-secondary-subtle fs-5 col-3">契約期間</span>
                                <span id="st_date" name="st_date" class="form-control fs-5 text-center">{{ \Carbon\Carbon::parse($app->start_date)->format('Y/m/d') }}</span>                                        
                                <span class="input-group-text text-center col-2 fs-5 bg-secondary-subtle">午前０時</span>
                                <span class="input-group-text bg-secondary-subtle">～</span>
                                <span id="ed_date" class="form-control fs-5 text-center bg-secondary-subtle">{{ \Carbon\Carbon::parse($app->end_date)->format('Y/m/d') }}</span>
                                <span class="input-group-text text-center col-2 fs-5 bg-secondary-subtle">午前０時</span>
                            </div>    
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="col-4 px-1">
                                <div class="shadow-sm input-group mb-3 col-4">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-4 text-center">{{ $t->count }}回目</span>
                                    <span name="first" class="input-group-text bg-secondary-subtle fs-5 col-8 text-center d-block">{{ !empty($t->rec) ? $t->rec : '-' }}</span>
                                </div>
                            </div>                                
                            @endforeach
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="col-4 px-1">
                                <div class="shadow-sm input-group mb-3 col-4">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-4 text-center">{{ !empty($t->td) ? '入金済' : '未収' }}</span>
                                    @role('admin|honbu')
                                    <input form="form_transfer_{{ $t->transfer_id }}" name="ta" class="input-group-text fs-5 col-6 text-end d-block non" value="{{ !empty($t->ta) ? $t->ta : 0 }}">
                                    @else
                                    <input class="input-group-text fs-5 col-6 text-end d-block non" value="{{ !empty($t->ta) ? number_format($t->ta) : 0 }}" disabled>
                                    <input form="form_transfer_{{ $t->transfer_id }}" name="ta" type="hidden" value="{{ !empty($t->ta) ? $t->ta : 0 }}">
                                    @endrole
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-2">円</span>
                                </div>
                            </div>                                
                            @endforeach
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="col-4 px-1">
                                <div class="input-group mb-3 col-12">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-4 text-center">領収日</span>
                                    <input form="form_transfer_{{ $t->transfer_id }}" name="td" class="input-group-text fs-5 col-8 text-center d-block" type="date" value="{{ $t->td ?? ''}}">
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="col-4 px-1">
                                <div class="shadow-sm input-group mb-3 col-4">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-4 text-center">領収方法</span>
                                    <select name="type" form="form_transfer_{{ $t->transfer_id }}" class="form-select bg-white fs-5 col-8 text-center fw-bold text-secondary">
                                        <option value="振込扱" {{ ($t->type ?? '') == '振込扱' ? 'selected' : '' }}>振込扱</option>
                                        <option value="口座振替扱" {{ ($t->type ?? '') == '口座振替扱' ? 'selected' : '' }}>口振扱</option>
                                        <option value="持参扱" {{ ($t->type ?? '') == '持参扱' ? 'selected' : '' }}>持参扱</option>
                                    </select>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="col-4 px-1">
                                <div class="shadow-sm input-group mb-3 col-4">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-4 text-center">払込方法</span>
                                    @if (!empty($t->td))
                                    <select name="ptype" 
                                            form="form_transfer_{{ $t->transfer_id }}" 
                                            class="form-select bg-white fs-5 col-8 text-center fw-bold text-secondary js-ptype-select" 
                                            data-count="{{ $t->count }}">
                                        <option value="振込" {{ ($t->ptype ?? '') == '振込' ? 'selected' : '' }}>振込</option>
                                        <option value="口座振替" {{ ($t->ptype ?? '') == '口座振替' ? 'selected' : '' }}>口座振替</option>
                                    </select>
                                    @else
                                    <span name="td" class="input-group-text bg-secondary-subtle fs-5 col-8 text-center d-block">-</span>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="col-4 px-1 t-pcount-{{ $t->count }}">
                                <div class="shadow-sm input-group mb-3 col-4">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-4 text-center">払込時期</span>
                                    @if (!empty($t->td))
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-3 ps-0 text-center js-pcount-input-{{ $t->count }} {{ ($t->ptype ?? '') === '口座振替' ? '' : 'd-none' }}">{{ $t->pyear }}年</span>
                                    <input form="form_transfer_{{ $t->transfer_id }}" name="pcount" class="input-group-text fs-5 col-2 text-center d-block js-pcount-input-{{ $t->count }} {{ ($t->ptype ?? '') === '口座振替' ? '' : 'd-none' }}" pattern="[1-9]{0,1}" type="text" value="{{ $t->pcount}}">
                                    <span class="input-group-text bg-secondary-subtle fs-5 col-3 text-center js-pcount-input-{{ $t->count }} {{ ($t->ptype ?? '') === '口座振替' ? '' : 'd-none' }}">回目</span>
                                    <span name="td" class="input-group-text bg-secondary-subtle fs-5 col-8 text-center d-block js-pcount-hyphen-{{ $t->count }} {{ ($t->ptype ?? '') === '口座振替' ? 'd-none' : '' }}">-</span>
                                    @else
                                    <span name="td" class="input-group-text bg-secondary-subtle fs-5 col-8 text-center d-block">-</span>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="d-flex mb-3">
                            <div class="d-flex col-4">
                            @foreach ($tf as $t)
                                @role('admin|honbu|dairiten')
                                <form class="{{ !empty($t->td) ? 'col-6' : 'col-12' }} px-1" method="POST" action="{{ route('transfer.update', ['id' => $t->transfer_id]) }}" id="form_transfer_{{ $t->transfer_id }}">
                                    @csrf
                                    <span 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#confirmModal_{{ $t->transfer_id }}"
                                    class="btn btn-secondary fs-5 col-12 shadow-sm">{{ !empty($t->td) ? '修正登録' : '発行' }}</span>
                                </form>
                                @if (!empty($t->td))
                                <a class="col-6 px-1" href="{{ route('transfer.preview', ['id' => $t->transfer_id]) }}" >
                                    <button class="btn btn-secondary fs-5 col-12 shadow-sm">プレビュー</button>
                                </a>
                                @endif
                                @endrole
                                @role('shibu')
                                @if (!empty($t->td))
                                <a class="col-12 px-1" href="{{ route('transfer.preview', ['id' => $t->transfer_id]) }}" >
                                    <button class="btn btn-secondary fs-5 col-12 shadow-sm">プレビュー</button>
                                </a>
                                @endif
                                @endrole
                                <div class="modal fade" id="confirmModal_{{ $t->transfer_id }}" tabindex="-1" aria-labelledby="confirmModalLabel_{{ $t->transfer_id }}" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="confirmModalLabel_{{ $t->transfer_id }}">
                                                {{ !empty($t->td) ? '修正' : '発行' }}の確認
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body text-start fs-5">
                                            領収書を{{ !empty($t->td) ? '修正' : '発行' }}</span>しますか？
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">キャンセル</button>
                                            
                                            <button type="submit" 
                                                    form="form_transfer_{{ $t->transfer_id }}" 
                                                    class="btn btn-sm btn-secondary" 
                                                    data-bs-dismiss="modal">
                                                {{ !empty($t->td) ? '修正' : '発行' }}する
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            </div>
                        </div>
                        <div class="d-flex">
                            @foreach ($tf as $t)
                            <div class="d-flex col-4">
                                <div class="shadow-sm input-group mb-3 col-4">
                                    @role('admin|honbu')
                                    @if (!empty($t->td))
                                    <a class="col-12 px-1" href="{{ route('transfer.preview.admin', ['id' => $t->transfer_id]) }}" >
                                        <button class="btn btn-secondary fs-5 col-12 shadow-sm">本部プレビュー</button>
                                    </a>
                                    @endif
                                    @endrole
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <style>
        label:has(input[type="radio"]:checked) {
            background: #86b7fe;
        }
        .form-control:disabled{
          background-color: unset;
        }
        .non:disabled{
          background-color: var(--bs-secondary-bg);
        }
        .form-check-input:disabled,.form-check-input[disabled]~.form-check-label, .form-check-input:disabled~.form-check-label{
          opacity:1;
        }
    </style>
    <script>
        window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
                requestAnimationFrame(() => window.scrollTo({ top: 0, left: 0, behavior: 'auto' }));
            }
        });
        document.addEventListener('DOMContentLoaded', function () {
            const ptypeSelects = document.querySelectorAll('.js-ptype-select');

            ptypeSelects.forEach(select => {
                // 対象の入力欄と「-」の要素を取得
                const count = select.dataset.count;
                const inputs = document.querySelectorAll(`.js-pcount-input-${count}`);
                const hyphen = document.querySelector(`.js-pcount-hyphen-${count}`);

                if (!inputs.length || !hyphen) return;

                function toggleDisplay() {
                    if (select.value === '振込') {
                        // 振込なら入力欄を隠し、「-」を表示する
                        inputs.forEach(el => {
                            el.classList.add('d-none');
                            // 要素が input タグだった場合、中身を空にする
                            if (el.tagName.toLowerCase() === 'input') {
                                el.value = '';
                            }
                        });
                        hyphen.classList.remove('d-none');
                    } else {
                        // 口座振替なら「-」を隠し、入力欄を表示する
                        inputs.forEach(el => el.classList.remove('d-none'));
                        hyphen.classList.add('d-none');
                    }
                }

                // セレクトボックス変更時に実行
                select.addEventListener('change', toggleDisplay);
            });
        });
    </script>
@endsection