@extends('task.layout')
@section('content')
<div class="container mt-4">

  {{-- 見出し --}}
  <div class="mb-4">
    <p class="text-muted small mb-1">ルーブリック名 / 項目名</p>
    <h4 class="fw-bold">
      {{ $task->context_title }} {{ $task->title }}<span class="fs-5 ms-3">ブース移動</span>
    </h4>
    <p class="mt-3"><span class="badge text-bg-primary fs-6">{{ $booth->name }}</span> の発表者を別のブースに移動</p>
  </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

  <div class="mb-3 d-flex gap-2">
    <button type="button" class="btn btn-sm btn-outline-primary" id="select-all">全員選択</button>
    <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect-all">全員解除</button>
  </div>


  <form action="{{ route('booth.move.store', [$task->id, $booth->id]) }}" method="POST">
    @csrf

    {{-- メンバー一覧 --}}
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between fs-5">
        <strong>メンバー 一覧</strong>
      </div>
      <div class="card-body">
        <table class="table table-bordered align-middle text-center">
          <thead class="table-light">
            <tr>
              <th style="width: 60px;">選択</th>
              <th style="width: 60px;">No.</th>
              <th>メンバー</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($boothUsers as $index => $user)
              <tr>
                <td>
                  <div class="form-check d-flex justify-content-center">
                    <input class="form-check-input fs-5" type="checkbox" name="user_ids[]" value="{{ $user['userid'] }}">
                  </div>
                </td>
                <td>{{ $index + 1 }}</td>
                <td>{{ $user['name'] }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

    {{-- 移動先ブース --}}
    <div class="mb-4">
      <div class="d-flex align-items-center gap-3 flex-wrap">
        <label for="new_booth_id" class="form-label fw-bold mb-0">移動先のブース</label>
        <select name="new_booth_id" id="new_booth_id" class="form-select border-primary" style="min-width: 220px; max-width: 300px;">
          <option value="">（選択してください）</option>
          @foreach ($nextbooths as $next)
            <option value="{{ $next->id }}">{{ $next->name }}</option>
          @endforeach
        </select>
      </div>
    </div>


    {{-- 実行・キャンセル --}}
    <div class="text-end mb-3">
      <button type="submit" class="btn btn-success">実行</button>
      <a href="{{ route('booth.show', [$task->id, $booth->id]) }}" class="btn btn-secondary">キャンセル</a>
    </div>
  </form>
</div>
@endsection


@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // 初期状態（変更なし）
    sessionStorage.setItem('isBoothDirty', 'false');

    const checkboxes = document.querySelectorAll('input[name="user_ids[]"]');
    const boothSelect = document.querySelector('select[name="new_booth_id"]');

    // チェックボックス変更 → dirty フラグを立てる
    checkboxes.forEach(cb => {
      cb.addEventListener('change', () => {
        sessionStorage.setItem('isBoothDirty', 'true');
      });
    });

    // ブース変更時も dirty フラグ
    if (boothSelect) {
      boothSelect.addEventListener('change', () => {
        sessionStorage.setItem('isBoothDirty', 'true');
      });
    }

    // 実行ボタンで保存済みに戻す
    const storeBtn = document.querySelector('form button[type="submit"]');
    if (storeBtn) {
      storeBtn.addEventListener('click', () => {
        sessionStorage.setItem('isBoothDirty', 'false');
      });
    }

    // 戻るボタンに確認をつける
    const backBtn = document.querySelector('a.btn-secondary[href*="booth"]');
    if (backBtn) {
      backBtn.addEventListener('click', function (e) {
        const isDirty = sessionStorage.getItem('isBoothDirty') === 'true';
        if (isDirty) {
          const confirmed = confirm("選択内容が保存されていません。戻ってもよろしいですか？");
          if (!confirmed) {
            e.preventDefault();
          } else {
            sessionStorage.setItem('isBoothDirty', 'false');
          }
        }
      });
    }

    // 全員選択ボタン
    const selectAllBtn = document.getElementById('select-all');
    if (selectAllBtn) {
      selectAllBtn.addEventListener('click', () => {
        checkboxes.forEach(cb => cb.checked = true);
        sessionStorage.setItem('isBoothDirty', 'true');
      });
    }

    // 全員解除ボタン
    const deselectAllBtn = document.getElementById('deselect-all');
    if (deselectAllBtn) {
      deselectAllBtn.addEventListener('click', () => {
        checkboxes.forEach(cb => cb.checked = false);
        sessionStorage.setItem('isBoothDirty', 'true');
      });
    }
  });
</script>
@endpush