@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-10 col-md-12">
                {{ Breadcrumbs::render('disaster.request.detail',$dsr->id) }}
                @if (session('status'))
                <div class="alert alert-success" role="alert">
                    {{ session('status') }}
                </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="shadow card">
                    <div class="shadow-sm card-header fs-3 d-flex">
                        <span>詳細画面</span>
                        <button class="fs-5 btn btn-secondary shadow-sm ms-auto" onclick="history.back();">戻る</button>
                    </div>
                    <div class="card-body">
                        <div class="d-flex mb-3">
                            <a class="col-1 px-1" href="{{ route('disaster.request.preview', ['id' => $dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">プレ<br>ビュー</button>
                            </a>
                            @if( $dsr->status == App\Models\StatusMasters::STATUS_9_SLIP_CRATED )
                            <a class="col-1 px-1" href="{{ route('disaster.request.fix', ['id' =>$dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">請求書<br>修正</button>
                            </a>
                            <button
                            data-bs-toggle="modal" 
                            data-bs-target="#restoreModal"
                            class="btn btn-secondary fs-6 col-1 px-1 h-100 shadow-sm">請求書<br>申請</button>
                            @endif
                            @if( $dsr->status == App\Models\StatusMasters::STATUS_9_AWAITING )
                            <a class="col-1 px-1" href="{{ route('disaster.request.fileDownload', ['id' => $dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">請求書<br>確認</button>
                            </a>
                            @role('admin|honbu')
                            <a class="col-1 px-1 ms-auto" href="{{ route('disaster.request.approval', ['id' => $dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">承認</button>
                            </a>
                            <a class="col-1 px-1" href="{{ route('disaster.request.reject', ['id' => $dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">差戻</button>
                            </a>
                            @endrole
                            @endif
                            @if( $dsr->status == App\Models\StatusMasters::STATUS_9_ACCEPTED )
                            <a class="col-1 px-1" href="{{ route('disaster.request.fileDownload', ['id' => $dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">請求書<br>確認</button>
                            </a>
                            @role('admin|honbu')
                            <a class="col-1 px-1 ms-auto" href="{{ route('disaster.request.approval.back', ['id' => $dsr->id]) }}" >
                                <button class="btn btn-secondary fs-6 col-12 h-100 shadow-sm">承認<br>戻し</button>
                            </a>
                            @endrole
                            @endif
                        </div>
                        <div class="d-flex">
                            <div class="col-3">
                                <div class="shadow-sm input-group">
                                    <span class="input-group-text bg-secondary-subtle fs-5"
                                        id="inputGroup-sizing-sm">ステータス</span>
                                    <div class="form-floating">
                                        <label for="floatingInput1"></label>
                                        <input type="text" value="{{ $status->name }}" class="form-control fs-5 p-1 ps-3" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="shadow-sm input-group ms-3 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>
                        </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="{{ $ds->workspace }}" class="form-control fs-5" 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" 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 @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">災害発生状況<br>(240文字)</span>
                            <textarea class="form-control" aria-label="With textarea" maxlength="150" rows="8" disabled>{{ $ds->summary }}</textarea>
                        </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>
                        @if( $dsr->status == App\Models\StatusMasters::STATUS_9_SLIP_CRATED || $dsr->kind != '未確定')
                        <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 non" onchange="kChange()" disabled>
                                    <option value="未確定" {{ $dsr->kind == "未確定" ? 'selected' : '' }}>未確定</option>
                                    <option value="死亡保険金" {{ $dsr->kind == "死亡保険金" ? 'selected' : '' }}>死亡保険金・死亡弔慰金</option>
                                    <option value="障害保険金" {{ $dsr->kind == "障害保険金" ? 'selected' : '' }}>障害保険金</option>
                                    <option value="休業保険金" {{ $dsr->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="{{ $dsr->grade ?? '' }}" id="grade" name="grade" class="form-control fs-5 non" disabled>
                                <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="{{ $dsr->downTime ?? '' }}" id="downTime" name="downTime" class="form-control fs-5 non" disabled>
                                <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="{{ Carbon\Carbon::parse($dsr->startDate)->format('Y-m-d') ?? '' }}" id="startDate" class="form-control fs-5 non" disabled>
                                <span class="input-group-text bg-secondary-subtle fs-5">～</span>
                                <input type="date" value="{{ Carbon\Carbon::parse($dsr->endDate)->format('Y-m-d') ?? '' }}" id="endDate" class="form-control fs-5 non" disabled>
                            </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="{{ $dsr->inDownTime ?? '' }}" id="inDownTime" name="inDownTime" class="form-control fs-5 non" disabled>
                                <span class="input-group-text bg-secondary-subtle fs-5">日</span>
                            </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if( $dsr->status == App\Models\StatusMasters::STATUS_9_SLIP_CRATED )
    <div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="restoreModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="restoreModalLabel">
                        災害保険金請求書申請
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" action="{{ route('disaster.request.fileStore', ['id' => $dsr->id])}}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body text-start fs-5">
                        <div class="fs-6 mb-3">災害保険金請求書を含む書類を１通以上３通以下提出してください</div>
                        <label for="uploadFile" class="form-label fs-6 mb-3">添付ファイルを選択してください（最大 5MB）<br>対応拡張子:.png, .jpg, .jpeg, .heic, .heif, .pdf</label>
                        <input class="form-control shadow-sm border-secondary custom-file-secondary mb-1" type="file" id="uploadFile1" name="file1" accept=".png, .jpg, .jpeg, .heic, .heif, .pdf" required >
                        <input class="form-control shadow-sm border-secondary custom-file-secondary mb-1" type="file" id="uploadFile2" name="file2" accept=".png, .jpg, .jpeg, .heic, .heif, .pdf" >
                        <input class="form-control shadow-sm border-secondary custom-file-secondary mb-3" type="file" id="uploadFile3" name="file3" accept=".png, .jpg, .jpeg, .heic, .heif, .pdf" >
                        <div class="fs-6 mb-1">災害保険金請求書を申請します。よろしいですか？</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">キャンセル</button>
                        <button type="submit" class="btn btn-sm btn-secondary">
                            実行する
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif
    <style>
        .form-control:disabled {
            background-color: unset;
        }

        label:has(input[type="radio"]:checked) {
            background: #86b7fe;
        }
    </style>
    <script>
        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');
          } 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');
          } 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');
          }
        }
        kChange()
    </script>
@endsection