@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="">
                {{ Breadcrumbs::render('amendment.cancell.confirm',$app->application_id) }}
                <div class="shadow card">
                    <div class="shadow-sm card-header fs-3">労保連労働災害保険契約内容異動届(解約)確認画面</div>
                    <form id="entryForm" method="POST" action="{{ route('amendment.cancell.store',$app->application_id) }}" onsubmit="return false;">
                        @csrf
                        <div class="card-body">
                            @php
                                $LIN = explode('-', $app->LINumber);
                                $postcode = explode('-', $ins->post_code);
                                $tels = explode('-', $ins->tel);
                                $ad = $ins->address1 . $ins->address2;
                                $input = session('c_input', []);
                            @endphp
                            @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>
                            <div class="fs-5 mb-3 red text-center text-danger">この内容で登録します。よろしいでしょうか？</div>
                            <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;">
                                    <span class="form-control fs-5 bg-gray">*</span>
                                    <label for="floatingInput2">所掌</label>
                                </div>
                                <div class="form-floating" style="width: 70px;flex: none;">
                                    <span class="form-control fs-5 bg-gray">**</span>
                                    <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="{{ $input['date'] }}" id="date" name="date" class="form-control fs-5" disabled>
                                    </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">{{ $input['type'] }}</span>
                                    </div>
                                </div>
                                <div id="reason-area" class="col-8 d-none">
                                    <div class="shadow-sm input-group mb-3 ms-1">
                                        <span class="input-group-text bg-secondary-subtle fs-5">解約理由</span>
                                        <span id="reason" name="reason" class="form-control fs-5">{{ $input['reason'] }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex">
                                <button onclick="history.back();" class="fs-5 btn btn-secondary shadow-sm">入力画面に戻る</button>
                                <button type="submit" class="fs-5 btn btn-secondary shadow-sm"  onClick="submitAfterValidate();"
                                    style="margin:auto 0px auto auto">登録する</button>
                            </div>
                        </div>
                    </form>
                </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;
        }
        span.bg-gray{
            background-color: var(--bs-secondary-bg);
        }
    </style>
        <script>
        const type = document.getElementById('type');
        const ra = document.getElementById('reason-area');
        const reason = document.getElementById("reason");
        if ("{{ $input['type'] }}" == "任意解約") {
            ra.classList.add('d-block');
            ra.classList.remove('d-none');
        } else {
            ra.classList.add('d-none');
            ra.classList.remove('d-block');
        }
        function submitAfterValidate() {
            const form = document.getElementById('entryForm');
            if (!form.reportValidity()) {
                return false;
            } else {
                form.submit();
            }
        }
    </script>
@endsection