@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="{{ url('/home') }}">ホーム</a></li>
          <li class="breadcrumb-item active">予約者一覧</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">

  <form method="GET" action="{{ route('reservation') }}" class="mb-3" id="list-form">
    <input type="hidden" name="sort" value="{{ $sort ?? request('sort') }}">
    <input type="hidden" name="sort_type" value="{{ $sortType ?? request('sort_type') }}">

    {{-- ▼ カード全体 --}}
    <div class="col-lg-12">
      <div class="card">
        {{-- ▼ 絞り込みフィルター（card-header） --}}
        <div class="card-header" style="font-weight:bold;">
          絞り込みフィルター
        </div>

        {{-- ▼ フィルター条件エリア（card-body） --}}
        <div class="card-body bg-white">
          <div class="row">
            {{-- 左カラム --}}
            <div class="col-md-6">
              <div class="form-group row">
                <label class="col-sm-3 col-form-label">駐輪場</label>
                <div class="col-sm-9">
                  @isset($parks)
                    <select name="park_id" class="form-control">
                      <option value="">全て</option>
                      @foreach($parks as $p)
                        <option value="{{ $p->park_id }}" {{ (string) request('park_id') === (string) $p->park_id ? 'selected' : '' }}>
                          {{ $p->park_name }}
                        </option>
                      @endforeach
                    </select>
                  @else
                    <input type="text" name="park_name" value="{{ request('park_name') }}" class="form-control"
                      placeholder="123456">
                  @endisset
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">利用者ID</label>
                <div class="col-sm-9">
                  <input type="text" name="user_id" value="{{ request('user_id') }}" class="form-control"
                    placeholder="123456">
                </div>
              </div>

              {{-- 利用者分類 --}}
              <div class="form-group row">
                <label class="col-sm-3 col-form-label">利用者分類</label>
                <div class="col-sm-9">
                  @isset($categories)
                    <select name="user_category1" class="form-control">
                      <option value="">全て</option>
                      @foreach($categories as $key => $label)
                        <option value="{{ $key }}" {{ (string) request('user_category1') === (string) $key ? 'selected' : '' }}>
                          {{ $label }}
                        </option>
                      @endforeach
                    </select>
                  @else
                    <input type="text" name="user_category1" value="{{ request('user_category1') }}" class="form-control"
                      placeholder="123456">
                  @endisset
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">タグシリアル</label>
                <div class="col-sm-9">
                  <input type="text" name="user_tag_serial" value="{{ request('user_tag_serial') }}"
                    class="form-control" placeholder="キーワード...">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">タグシリアル64進</label>
                <div class="col-sm-9">
                  <input type="text" name="user_tag_serial_64" value="{{ request('user_tag_serial_64') }}"
                    class="form-control" placeholder="キーワード...">
                </div>
              </div>
            </div>

            {{-- 右カラム --}}
            <div class="col-md-6">
              <div class="form-group row">
                <label class="col-sm-3 col-form-label">フリガナ</label>
                <div class="col-sm-9">
                  <input type="text" name="user_phonetic" value="{{ request('user_phonetic') }}" class="form-control"
                    placeholder="123456">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">電話番号</label>
                <div class="col-sm-9">
                  <input type="text" name="user_mobile" value="{{ request('user_mobile') }}" class="form-control"
                    placeholder="08011112222">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">メールアドレス</label>
                <div class="col-sm-9">
                  <input type="text" name="user_primemail" value="{{ request('user_primemail') }}" class="form-control"
                    placeholder="キーワード...">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">勤務先</label>
                <div class="col-sm-9">
                  <input type="text" name="user_workplace" value="{{ request('user_workplace') }}" class="form-control"
                    placeholder="キーワード...">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-3 col-form-label">学校</label>
                <div class="col-sm-9">
                  <input type="text" name="user_school" value="{{ request('user_school') }}" class="form-control"
                    placeholder="キーワード...">
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- ▼ 絞り込みボタン --}}
        <div class="card-body pt-2">
          <button type="submit" class="btn btn-default mr10">絞り込み</button>
          <a href="{{ route('reservation') }}" class="btn btn-default mr10">解除</a>
        </div>
      </div>
    </div>
    {{-- ページネーションのラッパーを追加 --}}
    <div class="container-fluid mb20 pagination-area">
      {{-- ページネーションのビジュアルラッパー --}}
      <div class="pagination-wrapper mt-2">
        <nav aria-label="ページネーション">
          {{-- Bootstrap のリンク出力（元の呼び出しをそのまま利用） --}}
          {{ $rows->appends(request()->except('page'))->links('pagination::bootstrap-4') }}
        </nav>
      </div>
    </div>

    {{-- ▼ 一覧テーブル部：スクロール対応 --}}
    <div class="col-lg-12 row sample03-wrapper no_padding_right mb20">
      <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm rv-table text-nowrap mb-0">
          <thead class="thead-light">
            <tr>
              @php($activeSort = request('sort'))
              @php($activeType = request('sort_type'))
              <th
                class="sorting {{ $activeSort === 'rc.user_id' ? ($activeType === 'asc' ? 'sorting_asc' : 'sorting_desc') : '' }}"
                sort="rc.user_id">
                <span class="sort-label">
                  利用者ID
                  <span class="sort-arrows" aria-hidden="true">
                    <span class="up">↑</span>
                    <span class="down">↓</span>
                  </span>
                </span>
              </th>

              <th
                class="sorting {{ $activeSort === 'u.user_name' ? ($activeType === 'asc' ? 'sorting_asc' : 'sorting_desc') : '' }}"
                sort="u.user_name">
                <span class="sort-label">
                  氏名
                  <span class="sort-arrows" aria-hidden="true">
                    <span class="up">↑</span>
                    <span class="down">↓</span>
                  </span>
                </span>
              </th>

              <th>フリガナ</th>
              <th>居住所:郵便番号</th>
              <th>居住所:都道府県</th>
              <th>居住所:市区群</th>
              <th>居住所:住所</th>
              <th>関連住所:郵便番号</th>
              <th>関連住所:都道府県</th>
              <th>関連住所:市区群</th>
              <th>関連住所:住所</th>
              <th>生年月日</th>
              <th>性別</th>
              <th>携帯電話番号</th>
              <th>自宅電話番号</th>
              <th>学校</th>
              <th>卒業予定</th>
              <th>備考</th>
              <th
                class="sorting {{ $activeSort === 'rc.reserve_id' ? ($activeType === 'asc' ? 'sorting_asc' : 'sorting_desc') : '' }}"
                sort="rc.reserve_id">
                <span class="sort-label">
                  定期予約ID
                  <span class="sort-arrows" aria-hidden="true">
                    <span class="up">↑</span>
                    <span class="down">↓</span>
                  </span>
                </span>
              </th>
              <th>利用者分類1</th>
              <th>利用者分類2</th>
              <th>利用者分類3</th>
              <th
                class="sorting {{ $activeSort === 'p.park_name' ? ($activeType === 'asc' ? 'sorting_asc' : 'sorting_desc') : '' }}"
                sort="p.park_name">
                <span class="sort-label">
                  駐輪場ID
                  <span class="sort-arrows" aria-hidden="true">
                    <span class="up">↑</span>
                    <span class="down">↓</span>
                  </span>
                </span>
              </th>
              <th>駐輪場所ID</th>
              <th>車種区分ID</th>
              <th>予約日時</th>
              <th>減免措置</th>
              <th>８００Ｍ以内フラグ</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($rows as $row)
                        <tr>
                          <td>
                            <a href="{{ route('users_edit', ['seq' => $row->user_seq ?? $row->user_id]) }}">
                              {{ $row->user_id }}
                            </a>
                          </td>
                          <td>{{ $row->user_name }}</td>
                          <td>{{ $row->user_phonetic }}</td>
                          <td>{{ $row->user_regident_zip }}</td>
                          <td>{{ $row->user_regident_pre }}</td>
                          <td>{{ $row->user_regident_city }}</td>
                          <td>{{ $row->user_regident_add }}</td>
                          <td>{{ $row->user_relate_zip }}</td>
                          <td>{{ $row->user_relate_pre }}</td>
                          <td>{{ $row->user_relate_city }}</td>
                          <td>{{ $row->user_relate_add }}</td>
                          <td>{{ $row->user_birthdate }}</td>
                          <td>{{ $row->user_gender }}</td>
                          <td>{{ $row->user_mobile }}</td>
                          <td>{{ $row->user_homephone }}</td>
                          <td>{{ $row->user_school }}</td>
                          <td>{{ $row->user_graduate }}</td>
                          <td>{{ $row->user_remarks }}</td>
                          <td>
                            <a href="{{ route('regularcontracts_edit', ['contract_id' => $row->contract_id]) }}">
                              {{ $row->contract_id }}
                            </a>
                          </td>
                          <td>{{ $row->user_category1 ?? '' }}</td>
                          <td>{{ $row->user_category2 ?? '' }}</td>
                          <td>{{ $row->user_category3 ?? '' }}</td>
                          <td>{{ $row->park_name ?? '-' }}</td>
                          <td>{{ $row->price_parkplaceid }}</td>
                          <td>{{ [1 => '自転車', 2 => '原付', 3 => 'その他'][$row->psection_id] ?? '' }}</td>
                          <td>{{ $row->reserve_date }}</td>
                          <td>{{ $row->user_reduction ?? '' }}</td>
                          <td>{{ $row->{'800m_flag'} ?? '' }}</td>
                        </tr>
            @empty
              <tr>
                <td colspan="25" class="text-center">データがありません。</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
    </div>
  </form>

</section>

@push('scripts')
  <script>
    // ▼ ソート機能（日本語コメント）
    // th 要素をクリックすると sort と sort_type を設定してフォーム送信します
    document.querySelectorAll('th[sort]').forEach(th => {
      th.classList.add('sorting'); // ベースクラスを確実に付ける
      th.addEventListener('click', function () {
        const col = this.getAttribute('sort');
        if (!col) return;
        const form = document.getElementById('list-form');
        const sortInput = form.querySelector('input[name="sort"]');
        const typeInput = form.querySelector('input[name="sort_type"]');
        const current = sortInput.value;
        const currentType = typeInput.value;
        let nextType = 'asc';
        if (current === col) {
          nextType = (currentType === 'asc') ? 'desc' : 'asc';
        }
        if (sortInput) sortInput.value = col;
        if (typeInput) typeInput.value = nextType;

        // 視覚的にソートクラスを切り替え（矢印の色に反映）
        document.querySelectorAll('th[sort]').forEach(h => {
          h.classList.remove('sorting_asc', 'sorting_desc');
          if (!h.classList.contains('sorting')) h.classList.add('sorting');
        });
        if (nextType === 'asc') {
          this.classList.add('sorting_asc');
        } else {
          this.classList.add('sorting_desc');
        }

        form.submit();
      });
    });
  </script>

  <style>
    /* ----------------------------------------
       ページネーションの横幅を確保して右寄せ（スクリーンショットは右寄せ）
       ---------------------------------------- */
    .pagination-area .pagination-wrapper {
      display: flex;
      justify-content: flex-end;
      /* 右寄せ：必要なら center に変更 */
      align-items: center;
      width: 100%;
      gap: 8px;
    }

    /* ========================================
       ソート矢印の色ルール（日本語コメント）
       状態:
         未ソート   -> 左(上)灰色, 右(下)灰色
         昇順(asc)  -> 左(上)黒色, 右(下)灰色
         降順(desc) -> 左(上)灰色, 右(下)黒色
       ======================================== */

    /* 既存の擬似要素で出る矢印を無効化（保険） */
    th.sorting::after,
    th.sorting_asc::after,
    th.sorting_desc::after {
      display: none !important;
      content: none !important;
      background-image: none !important;
      background: none !important;
    }

    /* 矢印を水平に並べる（左: up, 右: down） */
    th[sort] .sort-arrows,
    th.sorting .sort-arrows,
    th.sorting_asc .sort-arrows,
    th.sorting_desc .sort-arrows {
      display: inline-flex !important;
      flex-direction: row !important;
      gap: 6px !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      font-size: 12px !important;
      user-select: none !important;
      width: auto !important;
      box-sizing: border-box;
      vertical-align: middle;
      color: #bfc9d6 !important;
      /* デフォルト灰 */
    }

    th[sort] .sort-arrows .up,
    th[sort] .sort-arrows .down,
    th.sorting .sort-arrows .up,
    th.sorting .sort-arrows .down {
      display: inline-block !important;
      min-width: 14px;
      text-align: center;
      line-height: 1;
    }

    /* 未ソート: 両方灰 */
    th.sorting:not(.sorting_asc):not(.sorting_desc) .sort-arrows .up,
    th.sorting:not(.sorting_asc):not(.sorting_desc) .sort-arrows .down {
      color: #bfc9d6 !important;
    }

    /* 昇順: 左(上) 黒、右(下) 灰 */
    th.sorting_asc .sort-arrows .up,
    th[sort].sorting_asc .sort-arrows .up {
      color: #000000 !important;
    }

    th.sorting_asc .sort-arrows .down,
    th[sort].sorting_asc .sort-arrows .down {
      color: #bfc9d6 !important;
    }

    /* 降順: 左(上) 灰、右(下) 黒 */
    th.sorting_desc .sort-arrows .up,
    th[sort].sorting_desc .sort-arrows .up {
      color: #bfc9d6 !important;
    }

    th.sorting_desc .sort-arrows .down,
    th[sort].sorting_desc .sort-arrows .down {
      color: #000000 !important;
    }

    /* 矢印間を詰めたい場合（例: 見た目で letter-spacing 相当） */
    th[sort] .sort-arrows {
      gap: 0 !important;
    }

    th[sort] .sort-arrows .down {
      margin-left: -5px !important;
    }

    /* 矢印の下線を消す（リンク内にある場合の保険） */
    th .sort-arrows,
    th .sort-label,
    th[sort] .sort-arrows,
    th.sorting .sort-arrows {
      text-decoration: none !important;
    }

    th .sort-label a,
    th .sort-arrows a {
      text-decoration: none !important;
      border-bottom: none !important;
      color: inherit !important;
    }

    /* SVG 対応（矢印が svg の場合） */
    th[sort] .sort-arrows svg path,
    th.sorting .sort-arrows svg path {
      fill: #bfc9d6 !important;
    }

    th.sorting_asc .sort-arrows svg path,
    th[sort].sorting_asc .sort-arrows svg path {
      fill: #000 !important;
    }

    th.sorting_desc .sort-arrows svg path,
    th[sort].sorting_desc .sort-arrows svg path {
      fill: #000 !important;
    }

    /* レスポンシブ：小画面で間隔を狭める */
    @media (max-width: 575.98px) {
      th[sort] .sort-arrows {
        gap: 4px !important;
        font-size: 11px !important;
      }
    }

    /* フォーカス時の視認性（アクセシビリティ） */
    th.sorting:focus,
    th.sorting_asc:focus,
    th.sorting_desc:focus {
      outline: 2px solid rgba(0, 0, 0, 0.08);
      outline-offset: -2px;
    }
  </style>

@endpush
@endsection