@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-10">
      {{ Breadcrumbs::render('disaster.request.entry',$id) }}
      <div class="shadow card">
        <div class="shadow-sm card-header fs-3">労保連労働災害保険金請求書起票画面</div>
          <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>
            <form id="entryForm" method="POST" action="{{ route('disaster.request.confirm',$ds->id) }}" onsubmit="return false;">
              @csrf
              <div class="shadow-sm input-group mb-3">
                  <span class="input-group-text bg-secondary-subtle fs-5">労働保険番号</span>
                  @php
                  $LIN = explode('-',$app->LINumber);
                  @endphp
                  <div class="form-floating">
                      <input type="text"
                          class="form-control fs-5 non"
                          name="prefecture" id="floatingInput1" maxlength="2" value="{{ old('prefecture',$LIN[0]) }}"
                          placeholder="99" disabled>
                      <label for="floatingInput1">府県</label>
                  </div>
                  <div class="form-floating" style="width: 70px;flex: none;">
                      <input type="text" class="form-control fs-5 non"
                          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 non"
                          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 non"
                          name="core_number" id="floatingInput4" maxlength="6"
                          value="{{ old('core_number',$LIN[1]) }}" placeholder="999999" disabled>
                      <label for="floatingInput4">基幹番号</label>
                  </div>
                  <div class="form-floating">
                      <input type="text"
                          class="form-control fs-5 non"
                          name="branch_number" id="floatingInput5" maxlength="3"
                          value="{{ old('branch_number',$LIN[2]) }}" placeholder="999" disabled>
                      <label for="floatingInput5">枝番号</label>
                  </div>
                  <div class="form-floating" style="width: 70px;flex: none;">
                      <input type="text"
                          class="form-control fs-5 non"
                          name="" id="floatingInput6" maxlength="2"
                          value="{{ old('serial_number',$LIN[3]) }}" placeholder="99" disabled>
                      <label for="floatingInput6">追番</label>
                  </div>
              </div>
              <div class="shadow-sm input-group mb-3">
                <span class="input-group-text bg-secondary-subtle fs-5" id="inputGroup-sizing-sm">事業場名</span>
                <input type="text" value="{{ old('workplacename',$ins->workspace) }}" name="workplacename" class="form-control fs-5 non" disabled>
              </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 col-4" id="inputGroup-sizing-sm">被災者氏名</span>
                    <input type="text" value="{{ $ds->victim }}" class="form-control fs-5 non" disabled>
                  </div>
                </div>
                <div class="col-6 ms-1 pe-1">
                  <div class="shadow-sm input-group mb-3">
                    <span class="input-group-text bg-secondary-subtle fs-5 col-4">災害発生日</span>
                    <input id="happen_date" name="happen_date" type="datetime-local"
                        value="{{ $ds->incident_at }}"
                        class="form-control fs-5 text-center non @error('happen_date') is-invalid @enderror"
                        pattern="[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:-[0-9]{2}"
                        max="9999-12-31 23:59" onchange="dateChange()" disabled>
                  </div>
                </div>
              </div>
              <div class="shadow-sm input-group mb-3">
                <span class="input-group-text bg-secondary-subtle fs-5 col-3">保険の型</span>
                <input type="text" value="{{ $ins->pattern }}" class="form-control fs-5 non" disabled>
              </div>
              <div class="d-flex">
                <div class="col-5">
                  <div class="shadow-sm input-group mb-3">
                    <span class="input-group-text bg-secondary-subtle fs-5 col-3">請求内容</span>
                    <select id="kind" name="kind" class="form-control fs-5" onchange="kChange()">
                      <option value="未確定" {{ old('kind',"未確定") == "未確定" ? 'selected' : '' }}>未確定</option>
                      <option value="死亡保険金" {{ old('kind') == "死亡保険金" ? 'selected' : '' }}>死亡保険金・死亡弔慰金</option>
                      <option value="障害保険金" {{ old('kind') == "障害保険金" ? 'selected' : '' }}>障害保険金</option>
                      <option value="休業保険金" {{ old('kind') == "休業保険金" ? 'selected' : '' }}>休業保険金</option>
                    </select>
                  </div>
                </div>
                <div id="dy" class="col-3 ps-1 d-none">
                  <div class="shadow-sm input-group mb-3">
                    <span class="input-group-text bg-secondary-subtle fs-5 col-5">障害等級</span>
                    <input type="number" value="{{ old('grade') }}" id="grade" name="grade" class="form-control fs-5">
                    <span class="input-group-text bg-secondary-subtle fs-5 col-3">級</span>
                  </div>
                </div>
                <div id="dt1" class="col-3 ps-1 d-none">
                  <div class="shadow-sm input-group mb-3">
                    <span class="input-group-text bg-secondary-subtle fs-5">休業日数</span>
                    <input type="text" value="{{ old('downTime') }}" id="downTime" name="downTime" class="form-control fs-5">
                    <span class="input-group-text bg-secondary-subtle fs-5">日</span>
                  </div>
                </div>
              </div>
              <div id="dt2" class="d-flex d-none">
                <div class="col-7">
                  <div class="shadow-sm input-group mb-3">
                    <span class="input-group-text bg-secondary-subtle fs-5 col-3">休業期間</span>
                    <input type="date" value="{{ old('startDate') }}" id="startDate" name="startDate" class="form-control fs-5">
                    <span class="input-group-text bg-secondary-subtle fs-5">～</span>
                    <input type="date" value="{{ old('endDate') }}" id="endDate" name="endDate" class="form-control fs-5">
                  </div>
                </div>
                <div class="col-5 ps-1">
                  <div class="shadow-sm input-group mb-3">
                    <span class="input-group-text bg-secondary-subtle fs-5">休業期間内の休業日数</span>
                    <input type="text" value="{{ old('inDownTime') }}" id="inDownTime" name="inDownTime" class="form-control fs-5">
                    <span class="input-group-text bg-secondary-subtle fs-5">日</span>
                  </div>
                </div>
              </div>
              <div class="d-flex">
                  <a onclick="history.back();" class="fs-5 btn btn-secondary shadow-sm">戻る</a>
                  <button type="submit" class="fs-5 btn btn-secondary shadow-sm"
                      style="margin:auto 0px auto auto" onClick="submitAfterValidate();">確認する</button>
              </div>
            </form>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
.form-control:disabled{
  background-color: unset;
}
.non:disabled{
  background-color: var(--bs-secondary-bg);
}
label:has(input[type="radio"]:checked) {
background:#86b7fe;
}
</style>
<script>
        function submitAfterValidate() {
          const form = document.getElementById('entryForm');
          if (!form.reportValidity()) {
              return false;
          } else {
              form.submit();
          }
        }
        function kChange() {
          const sel = document.getElementById('kind');
          const dy = document.getElementById("dy");
          const dt1 = document.getElementById("dt1");
          const dt2 = document.getElementById("dt2");
          const gr = document.getElementById("grade");
          const sd = document.getElementById("startDate");
          const ed = document.getElementById("endDate");
          const dtime = document.getElementById("downTime");
          const idtime = document.getElementById("inDownTime");
          if (sel.value == "休業保険金") {
              dy.classList.add('d-none');
              dy.classList.remove('d-block');
              dt1.classList.remove('d-none');
              dt1.classList.add('d-block');
              dt2.classList.remove('d-none');
              dt2.classList.add('d-block');
              sd.value = '';
              ed.value = '';
              dtime.value = '';
              idtime.value = '';
          } else if(sel.value == "障害保険金") {
              dy.classList.remove('d-none');
              dy.classList.add('d-block');
              dt1.classList.add('d-none');
              dt1.classList.remove('d-block');
              dt2.classList.add('d-none');
              dt2.classList.remove('d-block');
              gr.value = '';
          } else {
              dy.classList.add('d-none');
              dy.classList.remove('d-block');
              dt1.classList.add('d-none');
              dt1.classList.remove('d-block');
              dt2.classList.add('d-none');
              dt2.classList.remove('d-block');
              sd.value = '';
              ed.value = '';
              dtime.value = '';
              idtime.value = '';
              gr.value = '';
          }
        }
        kChange()
</script>
@endsection