@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>
  </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('group.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="group_csv" class="form-label">CSVファイルを選択</label>
        <input type="file" name="group_csv" class="form-control" id="group_csv" required>
        <small id="filename" class="text-muted mt-1"></small>
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-primary mt-3">更新</button>
        @if(empty($groupUsers))
          <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($groupUsers) && empty($filename))
    <div class="alert alert-info">
      このグループ構成は <strong>登録済み</strong> のものです。
    </div>
  @endif


  @if (!empty($groupUsers))
    <form action="{{ route('group.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 ($groupUsers as $group => $users)
              @php
                $usernames = collect($users)->pluck('username')->implode(', ');
              @endphp
              <tr>
                <td style="text-align: center;">{{ $index++ }}</td>
                <td style="text-align: center;">{{ $group }}</td>
                <td style="text-align: center;">{{ $usernames }}</td>
              </tr>
              {{-- hidden inputs for each user per group --}}
              @foreach ($users as $i => $user)
                <input type="hidden" name="csv_rows[{{ $group }}][{{ $i }}][ltiuserid]" value="{{ $user['ltiuserid'] }}">
              @endforeach
            @endforeach
          </tbody>
        </table>
      </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 () {
    let isGroupDirty = sessionStorage.getItem('isGroupDirty') === 'true';

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

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

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