@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">{{ $isGroupMode == '0' ? '個人発表' : 'グループ発表' }}でのブース編集</span>
    </h4>
  </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
  

  {{-- CSV アップロード --}}
  <form action="{{ route('booth.preview', [$task->id]) }}" method="POST" enctype="multipart/form-data" class="mb-4">
    @csrf
    <div class="row align-items-end">
      <div class="col-md-6">
        <label for="booth_csv" class="form-label">CSVファイルを選択</label>
        <input type="file" name="booth_csv" class="form-control" id="booth_csv" required>
        <small id="filename" class="text-muted mt-1"></small>
      </div>
      {{-- is_group_mode を preview に渡す --}}
      <input type="hidden" name="is_group_mode" value="{{ $isGroupMode }}">
      <div class="col-md-2">
        <button type="submit" class="btn btn-primary mt-3">更新</button>
        @if(empty($boothUsers))
          <a href="{{ route('task.edit', [$task->id]) }}" class="btn btn-secondary mt-3">
            <i class="fas fa-arrow-left"></i> 戻る
          </a>
        @endif
      </div>
    </div>
    @if (isset($filename))
      <div class="mt-2 text-success">選択中のファイル： {{ $filename }}</div>
    @endif
  </form>

  {{-- CSVファイルのバリデーション --}}
  @if (!empty($csvErrors))
  <div class="alert alert-danger">
    <ul>
      @foreach ($csvErrors as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
  @endif

  @if (!empty($boothUsers) && empty($filename))
    <div class="alert alert-info">
      このブース構成は <strong>登録済み</strong> のものです。
    </div>
  @endif


  @if (!empty($boothUsers))
    <form action="{{ route('booth.store', [$task->id]) }}" method="POST">
      @csrf
      <div class="table-responsive mb-3">
        <table class="table table-bordered">
          <thead class="table-light">
            <tr>
              <th style="text-align: center;">No.</th>
              <th style="text-align: center;">ブース名</th>
              <th style="text-align: center;">メンバー／グループ</th>
            </tr>
          </thead>
          <tbody>
            @php $index = 1; @endphp
            @foreach ($boothUsers as $booth => $members)
              @php
                $names = collect($members)->pluck('name')->implode(', ');
              @endphp
              <tr>
                <td style="text-align: center;">{{ $index++ }}</td>
                <td style="text-align: center;">{{ $booth }}</td>
                <td style="text-align: center;">{{ $names }}</td>
              </tr>
            
              {{-- hidden inputs --}}
              @foreach ($members as $i => $user)
                <input type="hidden" name="csv_rows[{{ $booth }}][{{ $i }}][ltiuserid]" value="{{ $user['ltiuserid'] }}">
                <input type="hidden" name="csv_rows[{{ $booth }}][{{ $i }}][name]" value="{{ $user['name'] }}">
                <input type="hidden" name="csv_rows[{{ $booth }}][{{ $i }}][presenter]" value="{{ $user['presenter'] }}">
              @endforeach
            @endforeach
          </tbody>
        </table>
        {{-- is_group_mode を store に渡す --}}
        <input type="hidden" name="is_group_mode" value="{{ $isGroupMode }}">
      </div>

      {{-- 保存ボタン：エラーがない場合のみ表示 --}}
      <div class="text-end">
        @if (empty($csvErrors))
        <button type="submit" class="btn btn-success">実行</button>
        @endif
        <a href="{{ route('task.edit', [$task->id]) }}" class="btn btn-secondary">
          <i class="fas fa-arrow-left"></i> 戻る
        </a>
      </div>
    </form>
  @endif
</div>
@endsection


@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // URLから ?is_group_mode=1 を削除
    const url = new URL(window.location);
    if (url.searchParams.has('is_group_mode')) {
      url.searchParams.delete('is_group_mode');
      window.history.replaceState({}, '', url.pathname);
    }

    let isBoothDirty = sessionStorage.getItem('isBoothDirty') === 'true';

    // 更新ボタン押下で "未保存" 状態になる
    const updateBtn = document.querySelector('form[action*="booth/preview"] button[type="submit"]');
    if (updateBtn) {
      updateBtn.addEventListener('click', () => {
        sessionStorage.setItem('isBoothDirty', 'true');
      });
    }

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

    // 戻るボタンで確認ダイアログを出す
    const backLink = document.querySelector('a.btn-secondary[href*="edit"]');
    if (backLink) {
      backLink.addEventListener('click', function (e) {
        const isDirty = sessionStorage.getItem('isBoothDirty') === 'true';
        if (isDirty) {
          const confirmed = confirm("保存せずに戻ると、編集内容が失われます。本当に戻りますか？");
          if (!confirmed) {
            e.preventDefault(); // 画面遷移をブロック
          } else {
            sessionStorage.setItem('isBoothDirty', 'false');
          }
        }
      });
    }
  });
</script>
@endpush