@extends('task/layout')
@section('content')
<div class="container mt-4">
  <h3 class="mb-4">{{ $target == 'store' ? '評価活動登録' : '評価活動編集' }}</h3>

  {{-- フォーム項目のエラー --}}
  <div class="row">
    <div class="col-md-12">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif
    </div>
  </div>

  {{-- グループ編成未済でのブース編集エラー --}}
  @if (session('error'))
    <div class="alert alert-danger">
      {{ session('error') }}
    </div>
  @endif
  
  {{-- 保存完了メッセージ --}}
  @if (session('success'))
    <div class="alert alert-success">
      {{ session('success') }}
    </div>
  @endif

  {{-- scriptに$target、$hasGroups(datasetに送る)を渡す --}}
  <div id="form-container" data-target="{{ $target }}"></div>
  @if($target == 'update') <div id="status-data" data-group-status="{{ $hasGroups ? '1' : '0' }}"></div> @endif


  <div class="card shadow-sm">
    <div class="card-body">

      @if($target == 'store')
      <form id="task-store" action="{{ route('task.store') }}" method="post">
      @elseif($target == 'update')
      <form id="task-update" action="{{ route('task.update', [$task->id]) }}" method="post">
        @method('PUT')
      @endif
        @csrf

        {{-- title --}}
        <div class="mb-3">
          <label for="title" class="form-label">評価活動のタイトル</label>
          <input type="text" name="title" class="form-control" value="{{ old('title', $task->title) }}">
        </div>

        {{-- description --}}
        <div class="mb-3">
          <label for="description" class="form-label">評価活動の説明</label>
          <textarea name="description" class="form-control">{{ old('description', $task->description) }}</textarea>
        </div>

        {{-- rubric_criterion_id --}}
        <!-- <div class="mb-3">
          <label for="rubric_criterion_id" class="form-label">ルーブリックID</label>
          <input type="number" name="rubric_criterion_id" class="form-control" value="{{ old('rubric_criterion_id', $task->rubric_criterion_id) }}">
        </div> -->
        <input type="hidden" name="rubric_criterion_id" value="{{ $task->rubric_criterion_id }}">

        <!-- {{-- context_title --}}
        <div class="mb-3">
          <label for="context_title" class="form-label">LTIリンクの名称</label>
          <input type="text" name="context_title" class="form-control" value="{{ old('context_title', $task->context_title) }}">
        </div> -->

        <!-- {{-- resource_link_id --}}
        <div class="mb-3">
          <label for="resource_link_id" class="form-label">LMS上で割り振られるID</label>
          <input type="text" name="resource_link_id" class="form-control" value="{{ old('resource_link_id', $task->resource_link_id) }}">
        </div> -->

        {{-- group_presentation --}}
        <div class="mb-3">
          <label class="form-label">発表者の形態</label>
          <div class="form-check form-check-inline ms-4">
            <input type="radio" name="group_presentation" value="0" class="form-check-input" {{ old('group_presentation', $task->group_presentation ?? 0) == '0' ? 'checked' : '' }}>
            <label class="form-check-label">個人で発表</label>
          </div>
          <div class="form-check form-check-inline ms-2">
            <input type="radio" name="group_presentation" value="1" class="form-check-input" {{ old('group_presentation', $task->group_presentation ?? 0) == '1' ? 'checked' : '' }}>
            <label class="form-check-label">グループで発表</label>
          </div>
          @if($target == 'update')
            {{-- グループ編集リンク（初期は hidden） --}}
            <a id="groupEditLink" href="{{ route('group.edit', [$task->id]) }}" class="btn btn-outline-primary btn-sm ms-3" style="display: none;">
            <i class="fa-solid fa-pen-to-square"></i> グループ編成
            </a>
            @if($hasGroups)
              <span class="badge bg-success ms-3">グループ編成済み</span>
            @else
              <span class="badge bg-secondary ms-3">グループ未編成</span>
            @endif
          @endif
        </div>

        {{-- separate_locations --}}
        <div class="mb-3">
          <label class="form-label">発表場所の形態</label>
          <div class="form-check form-check-inline ms-4">
            <input type="radio" name="separate_locations" value="0" class="form-check-input" {{ old('separate_locations', $task->separate_locations ?? 0) == '0' ? 'checked' : '' }}>
            <label class="form-check-label">クラスで相互評価</label>
          </div>
          <div class="form-check form-check-inline ms-2">
            <input type="radio" name="separate_locations" value="1" class="form-check-input" {{ old('separate_locations', $task->separate_locations ?? 0) == '1' ? 'checked' : '' }}>
            <label class="form-check-label">ブースに分かれて相互評価</label>
          </div>
          @if($target == 'update')
            {{-- ブース編集リンク（リアルタイムのgroup_presentationの値も渡す） --}}
            <button type="button" id="boothEditLink" class="btn btn-outline-primary btn-sm ms-3" style="display: none;">
              <i class="fa-solid fa-pen-to-square"></i> ブース編成
            </button>
            @if($hasBooths)
              @if($grouplabel == 0)
                <span class="badge bg-success ms-3">個人発表でのブース編成済み</span>
              @else
                <span class="badge bg-success ms-3">グループ発表でのブース編成済み</span>
              @endif
            @else
              <span class="badge bg-secondary ms-3">ブース未編成</span>
            @endif
          @endif
        </div>

        {{-- anonymous --}}
        <div class="mb-3">
          <label class="form-label">匿名性の有無</label>
          <div class="form-check form-check-inline ms-4">
            <input type="radio" name="anonymous" value="0" class="form-check-input" {{ old('anonymous', $task->anonymous ?? 0) == '0' ? 'checked' : '' }}>
            <label class="form-check-label">実名</label>
          </div>
          <div class="form-check form-check-inline ms-2">
            <input type="radio" name="anonymous" value="1" class="form-check-input" {{ old('anonymous', $task->anonymous ?? 0) == '1' ? 'checked' : '' }}>
            <label class="form-check-label">匿名</label>
          </div>
        </div>

        {{-- check_by_teacher --}}
        <div class="mb-3">
          <label class="form-label">教員チェックの有無</label>
          <div class="form-check form-check-inline ms-4">
            <input type="radio" name="check_by_teacher" value="0" class="form-check-input" {{ old('check_by_teacher', $task->check_by_teacher ?? 0) == 0 ? 'checked' : '' }}>
            <label class="form-check-label">しない</label>
          </div>
          <div class="form-check form-check-inline ms-2">
            <input type="radio" name="check_by_teacher" value="1" class="form-check-input" {{ old('check_by_teacher', $task->check_by_teacher ?? 0) == 1 ? 'checked' : '' }}>
            <label class="form-check-label">する</label>
          </div>
        </div>

        {{-- self_assessment_mode --}}
        <div class="mb-3">
          <label class="form-label">自己評価モード</label>
          @foreach ([0 => '自己評価なし', 1 => '相互評価と同時に自己評価', 2 => '結果公開後に自己評価'] as $value => $label)
          <div class="form-check form-check-inline ms-3">
            <input type="radio" name="self_assessment_mode" value="{{ $value }}" class="form-check-input"
              {{ old('self_assessment_mode', $task->self_assessment_mode ?? 0) == $value ? 'checked' : '' }}>
            <label class="form-check-label">{{ $label }}</label>
          </div>
          @endforeach
        </div>

        {{-- status --}}
        <!-- <div class="mb-3">
          <label class="form-label">相互評価ステータス</label><br>
          @foreach ([0 => '準備状態', 1 => '相互評価状態', 2 => '相互評価終了状態', 3 => '公開状態'] as $value => $label)
          <div class="form-check form-check-inline">
            <input type="radio" name="status" value="{{ $value }}" class="form-check-input"
              {{ old('status', $task->status ?? 0) == $value ? 'checked' : '' }}>
            <label class="form-check-label">{{ $label }}</label>
          </div>
          @endforeach
        </div> -->
        
        <!-- {{-- created_by --}}
        <div class="mb-3">
          <label for="created_by" class="form-label">作成者ID</label>
          <input type="number" name="created_by" class="form-control" value="{{ old('created_by', $task->created_by) }}">
        </div>

        {{-- updated_by --}}
        <div class="mb-3">
          <label for="updated_by" class="form-label">更新者ID</label>
          <input type="number" name="updated_by" class="form-control" value="{{ old('updated_by', $task->updated_by) }}">
        </div> -->

        {{-- 日時フィールド --}}
        @php
          $dateFields = [
            'peer_review_start_date' => '相互評価開始日時',
            'peer_review_end_date' => '相互評価終了日時',
            'review_results_open_date' => '結果公開日時'
          ];
        @endphp

        @foreach($dateFields as $field => $label)
        <div class="mb-3">
          <label for="{{ $field }}" class="form-label">{{ $label }}</label>
          <input type="datetime-local" name="{{ $field }}" class="form-control"
            value="{{ old($field, optional($task->$field)->format('Y-m-d\\TH:i')) }}">
        </div>
        @endforeach

        {{-- 登録・戻るボタン --}}
        <div class="text-end">
          <button type="submit" class="btn btn-success">
            <i class="fas fa-save"></i> {{ $target == 'store' ? '登録' : '更新' }}
          </button>
          @if($target == 'store')
            <a href="{{ route('task.index') }}" class="btn btn-secondary">
              <i class="fas fa-arrow-left"></i> 戻る
            </a>
          @else
            <a href="{{ route('task.overview', [$task->id]) }}" class="btn btn-secondary">
              <i class="fas fa-arrow-left"></i> 戻る
            </a>
          @endif
        </div>
      </form>

      {{-- ブース編成リンク(hidden属性) --}}
      @if($target == 'update')
      <form id="boothForm" name="boothForm" action="{{ route('booth.edit', [$task->id]) }}" method="GET" style="display: none;">
        <input type="hidden" name="is_group_mode" id="isGroupModeInput" value="">
      </form>
      @endif

    </div>
  </div>
</div>
@endsection


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const target = document.getElementById('form-container').dataset.target;

  // ----------------------------
  // グループ・ブース編集リンクの表示制御
  // ----------------------------
  function toggleGroupLink() {
    const isGroup = document.querySelector('input[name="group_presentation"]:checked')?.value === '1';
    document.getElementById('groupEditLink').style.display = isGroup ? 'inline-block' : 'none';
  }
  function toggleBoothLink() {
    const isBooth = document.querySelector('input[name="separate_locations"]:checked')?.value === '1';
    document.getElementById('boothEditLink').style.display = isBooth ? 'inline-block' : 'none';
  }

  if (target === 'update') {
    toggleGroupLink();
    toggleBoothLink();

    document.querySelectorAll('input[name="group_presentation"]').forEach(el => {
      el.addEventListener('change', toggleGroupLink);
    });
    document.querySelectorAll('input[name="separate_locations"]').forEach(el => {
      el.addEventListener('change', toggleBoothLink);
    });
  }


  const boothForm = document.getElementById('boothForm'); // ブース編集用のフォームを取得
  const boothEditLink = document.getElementById('boothEditLink'); // ブース編成ボタンを取得
  const groupEditLink = document.getElementById('groupEditLink');
  const groupRadios = document.querySelectorAll('input[name="group_presentation"]');
  const isGroupModeInput = document.getElementById('isGroupModeInput');

  // グループ編成済みかどうか（サーバーから渡された data 属性を参照）
  const groupEdited = document.getElementById('status-data')?.dataset.groupStatus === '1';


  // ----------------------------
  // ブース編成リンクの動作
  // ----------------------------
  if (boothEditLink && boothForm) {
    boothEditLink.addEventListener('click', function (e) {
      const selectedRadio = [...groupRadios].find(r => r.checked);
      const selectedValue = selectedRadio ? selectedRadio.value : '0';

      // 値を hidden input にセット
      isGroupModeInput.value = selectedValue;

      // グループ発表モード & 未編成なら警告
      if (selectedValue === '1' && !groupEdited) {
        e.preventDefault();
        alert("『グループで発表』が選択されています。先にグループ編成を完了してください。");
        return;
      }

      const isDirty = sessionStorage.getItem('isTaskDirty') === 'true';
      if (isDirty) {
        const confirmed = confirm("保存せずにブース編成ページへ移動すると、編集内容が失われます。移動してもよろしいですか？");
        if (!confirmed) {
          e.preventDefault();
          return;
        }
        sessionStorage.setItem('isTaskDirty', 'false');
      }

      // 通常の送信処理
      boothForm.submit();
    });
  }


  // ----------------------------
  // グループ編成リンクの警告
  // ----------------------------
  if (groupEditLink) {
    groupEditLink.addEventListener('click', function (e) {
      const isDirty = sessionStorage.getItem('isTaskDirty') === 'true';
      if (isDirty) {
        const confirmed = confirm("保存せずにグループ編成ページへ移動すると、編集内容が失われます。移動してもよろしいですか？");
        if (!confirmed) {
          e.preventDefault();
        } else {
          sessionStorage.setItem('isTaskDirty', 'false');
        }
      }
    });
  }


  // ----------------------------
  // 入力変更検出 → フラグ保存
  // ----------------------------
  document.querySelectorAll('form input, form textarea, form select').forEach(function (el) {
    el.addEventListener('change', () => {
      sessionStorage.setItem('isTaskDirty', 'true');
    });
  });

  // ----------------------------
  // 保存ボタンで dirty フラグを解除
  // ----------------------------
  let storeBtn;
  if (target === 'store') {
    storeBtn = document.querySelector('#task-store button[type="submit"]');
  } else if (target === 'update') {
    storeBtn = document.querySelector('#task-update button[type="submit"]');
  }
  if (storeBtn) {
    storeBtn.addEventListener('click', () => {
      sessionStorage.setItem('isTaskDirty', 'false');
    });
  }

  // ----------------------------
  // 戻るボタンの警告処理
  // ----------------------------
  document.querySelectorAll('a.btn-secondary[href*="task"]').forEach(function (backLink) {
    backLink.addEventListener('click', function (e) {
      const isDirty = sessionStorage.getItem('isTaskDirty') === 'true';
      if (isDirty) {
        const confirmed = confirm("保存せずに戻ると、編集内容が失われます。本当に戻りますか？");
        if (!confirmed) {
          e.preventDefault();
        } else {
          sessionStorage.setItem('isTaskDirty', 'false');
        }
      }
    });
  });

});
</script>
@endpush