@extends('layouts.app')
@section('title', '本人確認手動処理 編集')

@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-lg-6">
        <h1 class="m-0 text-dark">編集</h1>
      </div>
      <div class="col-lg-6">
        <ol class="breadcrumb float-sm-right text-sm">
          <li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
          <li class="breadcrumb-item"><a href="{{ route('personal') }}">本人確認手動処理</a></li>
          <li class="breadcrumb-item active">編集</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">

    <form method="POST" action="{{ route('personal_edit', ['id' => $user->user_id]) }}" enctype="multipart/form-data">
      @csrf

      <div class="card mb-3">
        <div class="card-body pb-2">

          {{-- 上段：本人確認写真1／本人確認写真2 --}}
          <div class="row align-items-start mb-3">
            <div class="col-md-6 text-center mb-3 mb-md-0">
              <div class="label-head">本人確認写真ファイル名1</div>
              <div class="photo-box mx-auto">
                @if($user->photo_filename1)
                  <img src="{{ asset('storage/photos/'.$user->photo_filename1) }}" alt="" class="img-fluid h-100 w-auto">
                @endif
              </div>
            </div>
            <div class="col-md-6 text-center">
              <div class="label-head">本人確認写真ファイル名2</div>
              <div class="photo-box mx-auto">
                @if($user->photo_filename2)
                  <img src="{{ asset('storage/photos/'.$user->photo_filename2) }}" alt="" class="img-fluid h-100 w-auto">
                @endif
              </div>
            </div>
          </div>

          {{-- 利用者ID＋利用者分類ID --}}
          <div class="row align-items-start mb-3">
            {{-- 利用者ID --}}
            <div class="col-md-4 text-center mb-3 mb-md-0">
              <div class="label-head">利用者ID</div>
              <div class="id-board d-flex flex-column justify-content-center align-items-center">
                <div class="id-caption">利用者ID</div>
                <div class="id-value">{{ $user->user_id }}</div>
              </div>
            </div>
            {{-- 利用者分類ID --}}
            <div class="col-md-8">
              <div class="label-head mb-1">利用者分類ID</div>
              <div class="category-wrap">
                @foreach($usertypes as $type)
                  <label class="cat-item">
                    <input type="radio"
                           name="user_categoryid"
                           value="{{ $type->user_categoryid }}"
                           {{ (string)$user->user_categoryid === (string)$type->user_categoryid ? 'checked' : '' }}>
                    {{ $type->print_name }}
                  </label>
                @endforeach
              </div>
            </div>
          </div>

          {{-- 情報テーブル：見た目を目標画像に寄せる（左セル薄ベージュ、罫線、行間） --}}
          <div class="table-responsive mb-2">
            <table class="table table-bordered table-sm info-table">
              <tbody>
                <tr>
                  <th>利用者名</th><td class="w-25">{{ $user->user_name }}</td>
                  <th>フリガナ</th><td class="w-25">{{ $user->user_phonetic }}</td>
                  <th>携帯電話番号</th><td class="w-25">{{ $user->user_mobile }}</td>
                </tr>
                <tr>
                  <th>自宅電話番号</th><td>{{ $user->user_homephone }}</td>
                  <th>生年月日</th><td>{{ $user->user_birthdate }}</td>
                  <th>メールアドレス</th><td>{{ $user->user_primemail }}</td>
                </tr>
                <tr>
                  <th>契約予定駐輪場名</th>
                  <td colspan="5">{{ $user->user_park_number }}</td>
                </tr>

                {{-- 居住所 --}}
                <tr>
                  <th rowspan="2" class="align-middle">居住所</th>
                  <th class="sub">郵便番号</th><td>{{ $user->user_regident_zip }}</td>
                  <th class="sub">都道府県</th><td>{{ $user->user_regident_pre }}</td>
                  <td></td>
                </tr>
                <tr>
                  <th class="sub">市区群</th><td>{{ $user->user_regident_city }}</td>
                  <th class="sub">住所</th><td colspan="2">{{ $user->user_regident_add }}</td>
                </tr>

                {{-- 関連住所 --}}
                <tr>
                  <th rowspan="2" class="align-middle">関連住所</th>
                  <th class="sub">郵便番号</th><td>{{ $user->user_relate_zip }}</td>
                  <th class="sub">都道府県</th><td>{{ $user->user_relate_pre }}</td>
                  <td></td>
                </tr>
                <tr>
                  <th class="sub">市区群</th><td>{{ $user->user_relate_city }}</td>
                  <th class="sub">住所</th><td colspan="2">{{ $user->user_relate_add }}</td>
                </tr>

                <tr>
                  <th>学校</th><td>{{ $user->user_school }}</td>
                  <th>卒業予定</th><td>{{ $user->user_graduate }}</td>
                  <th>区民</th><td>{{ $user->ward_residents }}</td>
                </tr>

                <tr>
                  <th>備考</th>
                  <td colspan="5">{{ $user->user_remarks }}</td>
                </tr>

                <tr>
                  <th>本人確認書類</th>
                  <td colspan="5">{{ $user->user_idcard }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          {{-- 注意文＆アクション --}}
          <div class="alert alert-info mb-3">
            本人確認書類写真と登録情報を比較して問題なければ、「本人確認チェックOK」ボタンを押下してください。<br>
            問題がある場合は「備考」にNG理由を記載のうえ、「本人確認チェックNG」ボタンを押下してください。
          </div>

          <div class="row">
            <div class="col-md-6 mb-2 mb-md-0">
              <button type="submit" name="check" value="ok" class="btn btn-success btn-block">
                本人確認チェックOK
              </button>
            </div>
            <div class="col-md-6">
              <button type="submit" name="check" value="ng" class="btn btn-danger btn-block">
                本人確認チェックNG
              </button>
            </div>
          </div>

        </div>
      </div>
    </form>
  </div>
</section>

{{-- 専用スタイル（目標画像の見た目に寄せる） --}}
<style>
  .label-head{font-weight:600; margin-bottom:.25rem;}
  .photo-box{width:220px;height:160px;border:1px solid #ddd;background:#fff;overflow:hidden}
  .id-board{width:100%;height:160px;border:1px solid #ddd;background:#f1f3f5}
  .id-caption{font-size:.9rem;color:#6c757d;margin-bottom:.25rem}
  .id-value{font-size:1.25rem;font-weight:700;letter-spacing:.5px}

  /* 利用者分類IDを2段組みで縦に長いときも見やすく */
  .category-wrap{
    max-height: 260px;
    overflow:auto;
    padding:.5rem .75rem;
    border:1px solid #e5e5e5;
    background:#fff;
    column-count:2;
    column-gap: 2rem;
  }
  @media (max-width: 768px){ .category-wrap{column-count:1;} }
  .cat-item{break-inside: avoid; display:block; margin:.25rem 0; white-space:nowrap;}
  .cat-item input{margin-right:.35rem;}

  /* テーブル見た目を目標画像に合わせる */
  .info-table th{
    background:#fbf4e8; /* 薄いベージュ */
    width: 12rem;
    white-space: nowrap;
  }
  .info-table th.sub{background:#fffaf2;color:#555;font-weight:500;width:8rem;}
  .info-table td{background:#fff;}
</style>
@endsection