@extends('layouts.app')

@section('content')
  <div class="container-fluid">
    {{-- ログインボタン --}}
    <div style="position:absolute; right:32px; top:24px; z-index:2;">
      <a href="{{ route('login') }}" class="btn btn-outline-primary btn-sm">ログイン</a>
    </div>

    <h3 class="mb-4">料金一覧表</h3>

    {{-- 上部ツールバー：左=駐輪場セレクト、右(同列)=登録 --}}
    <div class="d-flex align-items-center mb-3">
      {{-- 駐輪場選択（GET） --}}
      <form method="GET" action="{{ route('pricelist') }}" class="form-inline mb-0">
        <label for="park_id" class="mr-2">駐輪場</label>
        <select name="park_id" id="park_id" class="form-control mr-2 select-park" style="min-width:220px;"
          onchange="this.form.submit()">
          <option value="" @if(empty($parkId)) selected @endif></option>
          @foreach($parkList as $park)
            <option value="{{ $park->park_id }}" @if((string) $parkId === (string) $park->park_id) selected @endif>
              {{ $park->park_name }}
            </option>
          @endforeach
        </select>
      </form>

      {{-- 登録（POST フォームを指定して送信） --}}
      <button type="submit" class="btn btn-default btn-sm ml-3 register" form="bulkUpdateForm">登録</button>
    </div>

    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif
    
    {{-- 一括更新フォーム（POST） --}}
    <form id="bulkUpdateForm" method="POST" action="{{ route('pricelist_update') }}" onsubmit="return;">
      @csrf
      {{-- 必要なら park_id を一緒に送る --}}
      <input type="hidden" name="park_id" value="{{ $parkId }}">

      @if(isset($masterList) && count($masterList))
        @foreach($masterList as $master)
          <div class="mb-4">
            <div class="text-center fw-bold" style="font-size:1.1em;">
              {{ $master['name'] }}
              <button type="button" class="btn btn-warning btn-sm ml-2" disabled>{{ $master['status'] }}</button>
            </div>

            <div class="table-responsive" style="overflow-x:auto; min-width:1300px;">
              <table class="table table-bordered table-sm bg-white mt-2" style="min-width:1300px;">
                <thead>
                  <tr>
                    <th rowspan="2">駐輪分類</th>
                    <th rowspan="2">駐輪車室番号</th>
                    <th rowspan="2">分類１</th>
                    <th rowspan="2">分類２</th>
                    <th rowspan="2">分類３</th>
                    <th colspan="5">自転車</th>
                    <th colspan="5">原付</th>
                    <th colspan="5">自動二輪</th>
                  </tr>
                  <tr>
                    <th>1ヶ月</th>
                    <th>2ヶ月</th>
                    <th>3ヶ月</th>
                    <th>6ヶ月</th>
                    <th>12ヶ月</th>
                    <th>1ヶ月</th>
                    <th>2ヶ月</th>
                    <th>3ヶ月</th>
                    <th>6ヶ月</th>
                    <th>12ヶ月</th>
                    <th>1ヶ月</th>
                    <th>2ヶ月</th>
                    <th>3ヶ月</th>
                    <th>6ヶ月</th>
                    <th>12ヶ月</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($master['groups'] as $group)
                    <tr>
                      <td>{{ $group['classification'] ?? '' }}</td>
                      <td>{{ $group['room_number'] ?? '' }}</td>
                      <td>{{ $group['category1'] ?? '' }}</td>
                      <td>{{ $group['category2'] ?? '' }}</td>
                      <td>{{ $group['category3'] ?? '' }}</td>
                      <input type="hidden" name="rows[{{ $group['id'] }}][id]" value="{{ $group['id'] }}">

                      {{-- 自転車 --}}
                      <td><input type="text" name="rows[{{ $group['id'] }}][bike_1m]"
                          class="form-control form-control-sm price-input" value="{{ $group['bike_1m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][bike_2m]"
                          class="form-control form-control-sm price-input" value="{{ $group['bike_2m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][bike_3m]"
                          class="form-control form-control-sm price-input" value="{{ $group['bike_3m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][bike_6m]"
                          class="form-control form-control-sm price-input" value="{{ $group['bike_6m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][bike_12m]"
                          class="form-control form-control-sm price-input" value="{{ $group['bike_12m'] ?? '' }}"></td>

                      {{-- 原付 --}}
                      <td><input type="text" name="rows[{{ $group['id'] }}][moped_1m]"
                          class="form-control form-control-sm price-input" value="{{ $group['moped_1m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][moped_2m]"
                          class="form-control form-control-sm price-input" value="{{ $group['moped_2m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][moped_3m]"
                          class="form-control form-control-sm price-input" value="{{ $group['moped_3m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][moped_6m]"
                          class="form-control form-control-sm price-input" value="{{ $group['moped_6m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][moped_12m]"
                          class="form-control form-control-sm price-input" value="{{ $group['moped_12m'] ?? '' }}"></td>

                      {{-- 自動二輪 --}}
                      <td><input type="text" name="rows[{{ $group['id'] }}][motorcycle_1m]"
                          class="form-control form-control-sm price-input" value="{{ $group['motorcycle_1m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][motorcycle_2m]"
                          class="form-control form-control-sm price-input" value="{{ $group['motorcycle_2m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][motorcycle_3m]"
                          class="form-control form-control-sm price-input" value="{{ $group['motorcycle_3m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][motorcycle_6m]"
                          class="form-control form-control-sm price-input" value="{{ $group['motorcycle_6m'] ?? '' }}"></td>
                      <td><input type="text" name="rows[{{ $group['id'] }}][motorcycle_12m]"
                          class="form-control form-control-sm price-input" value="{{ $group['motorcycle_12m'] ?? '' }}"></td>
                    </tr>
                  @empty
                    <tr>
                      <td colspan="21" class="text-center">データがありません。</td>
                    </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        @endforeach
      @else
        <div class="mb-4">
          <div class="table-responsive" style="overflow-x:auto; min-width:1300px;">
            <table class="table table-bordered table-sm bg-white mt-2" style="min-width:1300px;">
              <thead> …（省略：空表のヘッダは従来どおり）… </thead>
              <tbody>
                <tr>
                  <td colspan="21" class="text-center">データがありません。</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      @endif
    </form>
  </div>

  <style>
    .price-input:read-only {
      background: #fff700 !important;
      color: #222 !important;
      border: 1px solid #ccc;
    }

    th {
      white-space: nowrap !important;
      word-break: keep-all !important;
      font-size: 13px;
      text-align: center;
      vertical-align: middle;
      min-width: 50px;
      background: #efefef !important;
    }
  </style>
@endsection