@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-10">
      {{ Breadcrumbs::render('disaster.entry',$app->application_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.confirm',$app->application_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="{{ old('name') }}" name="name" class="form-control fs-5 @error('name') is-invalid @enderror">
                  </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="{{ old('happen_date') }}"
                        class="form-control fs-5 text-center @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()" required>
                  </div>
                </div>
              </div>
              <div class="shadow-sm input-group mb-3">
                <span class="input-group-text bg-secondary-subtle fs-5 col-3">災害発生状況<br>(240文字)</span>
                <textarea class="form-control @error('summary') is-invalid @enderror" name="summary" aria-label="With textarea" style="font-size:22px;" maxlength="240" rows="8">{{ old('summary') }}</textarea>
              </div>
              <div class="d-flex">
                  <a href="{{ route('insure.index',$app->application_id) }}" 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();
            }
        }
</script>
@endsection