@php
  $mapsToLabel = [
    'email' => 'メール',
    'name' => '名前',
    'name_kana' => 'フリガナ',
    'phone' => '電話',
    'address' => '住所',
    'line_user_id' => 'LINE userId',
    'custom' => '自由項目',
  ];
  $inputTypeOptionLabels = \App\Models\ScenarioReaderFormField::inputTypeOptionLabels();
@endphp

<div class="card scenario-ws-card mb-3">
  <div class="card-body">
    <h2 class="h5 mb-2">登録フォーム・読者項目</h2>
    <p class="text-muted small mb-3">登録フォームでよく使う既定項目を用意しています。<strong>フォーム利用</strong>で登録フォームへの出し分け、<strong>必須</strong>で入力必須にできます。カスタム項目は行末から追加・削除できます（既定項目は削除不可）。</p>
    <p class="text-muted small mb-3"><i class="bi bi-info-circle me-1" aria-hidden="true"></i><strong>他シナリオ連携</strong>をオンにした項目は、同一送信用アカウント内の<strong>他シナリオで同じメールアドレスの読者</strong>に、<strong>同一キー・同一格納先・連携オン</strong>の項目があるときだけ値を反映します（公開登録・読者手動追加の直後）。空の値は送りません。LINE 用の <code class="small">@line.local</code> メールは対象外です。</p>
    <p class="small mb-3">公開登録ページ（ゲスト向け）: <a href="{{ url('/r/'.$scenario->uid.'/register') }}" target="_blank" rel="noopener noreferrer">{{ url('/r/'.$scenario->uid.'/register') }}</a> · API: <code class="small">POST {{ url('/api/r/'.$scenario->uid.'/register') }}</code>（JSON 本文のキーは各項目の <strong>キー</strong> と同じ）</p>

    <form method="POST" action="{{ route('scenario.workspace.registration-fields.update', [$account, $scenario]) }}" id="registration-fields-form">
      @csrf
      @method('PUT')
      <input type="hidden" name="field_order" id="field_order" value="{{ $readerFormFields->pluck('id')->implode(',') }}">

      <div class="table-responsive">
        <table class="table table-sm align-middle">
          <thead class="table-light">
            <tr>
              <th style="width:44px" class="text-muted small" title="表示順">順</th>
              <th>名称</th>
              <th style="width:7rem">キー</th>
              <th style="width:5rem">格納先</th>
              <th style="width:5rem" class="text-center" title="オンにした項目は、他シナリオの同メール読者へ条件付きで反映されます。">他シナリオ連携</th>
              <th style="width:5rem" class="text-center">フォーム利用</th>
              <th style="width:5rem" class="text-center">必須</th>
              <th style="width:12rem">入力形式</th>
              <th>初期値・選択肢</th>
              <th style="width:3rem"></th>
            </tr>
          </thead>
          <tbody id="registration-fields-tbody">
            @foreach($readerFormFields as $f)
              @php
                $optionsText = '';
                if (is_array($f->options_json) && count($f->options_json)) {
                  $optionsText = implode("\n", $f->options_json);
                }
              @endphp
              <tr data-field-id="{{ $f->id }}">
                <td class="text-nowrap">
                  <button type="button" class="btn btn-sm btn-outline-secondary btn-move-up py-0" title="上へ"><i class="bi bi-chevron-up"></i></button>
                  <button type="button" class="btn btn-sm btn-outline-secondary btn-move-down py-0" title="下へ"><i class="bi bi-chevron-down"></i></button>
                </td>
                <td>
                  <input type="text" class="form-control form-control-sm" name="fields[{{ $f->id }}][label]" value="{{ old('fields.'.$f->id.'.label', $f->label) }}" maxlength="200" required>
                </td>
                <td>
                  @if($f->is_preset)
                    <code class="small">{{ $f->field_key }}</code>
                  @else
                    <code class="small">{{ $f->field_key }}</code>
                  @endif
                </td>
                <td><span class="small text-muted">{{ $mapsToLabel[$f->maps_to] ?? $f->maps_to }}</span></td>
                <td class="text-center">
                  <input type="hidden" name="fields[{{ $f->id }}][sync_other_scenarios]" value="0">
                  <input class="form-check-input" type="checkbox" name="fields[{{ $f->id }}][sync_other_scenarios]" value="1" {{ old('fields.'.$f->id.'.sync_other_scenarios', $f->sync_other_scenarios ? '1' : '0') === '1' ? 'checked' : '' }}>
                </td>
                <td class="text-center">
                  <input type="hidden" name="fields[{{ $f->id }}][form_enabled]" value="0">
                  <input class="form-check-input js-form-enabled" type="checkbox" name="fields[{{ $f->id }}][form_enabled]" value="1" {{ old('fields.'.$f->id.'.form_enabled', $f->form_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                </td>
                <td class="text-center">
                  <input type="hidden" name="fields[{{ $f->id }}][is_required]" value="0">
                  <input class="form-check-input js-is-required" type="checkbox" name="fields[{{ $f->id }}][is_required]" value="1" {{ old('fields.'.$f->id.'.is_required', $f->is_required ? '1' : '0') === '1' ? 'checked' : '' }} {{ $f->form_enabled ? '' : 'disabled' }}>
                </td>
                <td>
                  <select class="form-select form-select-sm" name="fields[{{ $f->id }}][input_type]">
                    @foreach(\App\Models\ScenarioReaderFormField::allowedInputTypes() as $it)
                      <option value="{{ $it }}" {{ old('fields.'.$f->id.'.input_type', $f->input_type) === $it ? 'selected' : '' }}>{{ $inputTypeOptionLabels[$it] ?? $it }}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <input type="text" class="form-control form-control-sm mb-1" name="fields[{{ $f->id }}][default_value]" value="{{ old('fields.'.$f->id.'.default_value', $f->default_value) }}" maxlength="500" placeholder="初期値">
                  <textarea class="form-control form-control-sm" name="fields[{{ $f->id }}][options_lines]" rows="2" placeholder="リスト形式のとき：1行に1つ（Select / Radio / Checkbox）">{{ old('fields.'.$f->id.'.options_lines', $optionsText) }}</textarea>
                </td>
                <td class="text-end">
                  @if(! $f->is_preset)
                    <button type="button" class="btn btn-sm btn-outline-danger" title="削除" data-bs-toggle="modal" data-bs-target="#deleteFieldModal{{ $f->id }}"><i class="bi bi-trash"></i></button>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div class="d-flex flex-wrap gap-2 align-items-center mt-2">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-1"></i>保存</button>
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addFieldModal"><i class="bi bi-plus-lg me-1"></i>項目追加</button>
        <a href="{{ route('scenario.workspace.show', [$account, $scenario]) }}" class="btn btn-outline-secondary">概要に戻る</a>
      </div>
      <p class="text-muted small mt-2 mb-0">行の <strong>↑↓</strong> で表示順を変えてから保存すると、並びが反映されます。</p>
    </form>
  </div>
</div>

@foreach($readerFormFields->where('is_preset', false) as $f)
  <div class="modal fade" id="deleteFieldModal{{ $f->id }}" tabindex="-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">項目を削除</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body small">「{{ $f->label }}」（{{ $f->field_key }}）を削除しますか？</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <form method="POST" action="{{ route('scenario.workspace.registration-fields.destroy', [$account, $scenario, $f->id]) }}" class="d-inline">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger">削除する</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endforeach

<div class="modal fade" id="addFieldModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" action="{{ route('scenario.workspace.registration-fields.store', [$account, $scenario]) }}">
        @csrf
        <div class="modal-header"><h5 class="modal-title">カスタム項目を追加</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label fw-semibold">名称</label>
            <input type="text" name="label" class="form-control" maxlength="200" required>
          </div>
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" name="set_field_key" value="1" id="add_set_field_key">
            <label class="form-check-label" for="add_set_field_key">キーを自分で設定する</label>
            <div class="form-text">項目ごとにキーを設定できます。設定しなくても問題ありません。キーを設定すると、外部ツールとの連携などで同じ項目を指定しやすくなります。</div>
            <div class="form-text">チェックをオンにしたときだけ、下のキー欄に入力してください。オフのときはシステムが自動で一意のキーを付けます。</div>
          </div>
          <div class="mb-2 d-none" id="add_field_key_wrap">
            <label class="form-label fw-semibold">キー</label>
            <input type="text" name="field_key" class="form-control" id="add_field_key" pattern="[a-z][a-z0-9_]*" maxlength="64" disabled placeholder="例: company_name">
            <div class="form-text">半角英小文字で始め、英数字とアンダースコアのみ。</div>
          </div>
          <div class="mb-2">
            <label class="form-label fw-semibold">入力形式</label>
            <select name="input_type" class="form-select">
              @foreach(\App\Models\ScenarioReaderFormField::allowedInputTypes() as $it)
                <option value="{{ $it }}">{{ $inputTypeOptionLabels[$it] ?? $it }}</option>
              @endforeach
            </select>
            <div class="form-text">日付・メール・リストから選ぶ形式など、フォーム上の入力のしかただけ選べば大丈夫です。</div>
          </div>
          <div class="form-check mt-2">
            <input type="hidden" name="form_enabled" value="0">
            <input class="form-check-input" type="checkbox" name="form_enabled" value="1" id="add_form_enabled" checked>
            <label class="form-check-label" for="add_form_enabled">フォームで利用する</label>
          </div>
          <div class="form-check">
            <input type="hidden" name="is_required" value="0">
            <input class="form-check-input" type="checkbox" name="is_required" value="1" id="add_is_required">
            <label class="form-check-label" for="add_is_required">入力必須</label>
          </div>
          <div class="mb-2 mt-2">
            <label class="form-label">初期値（任意）</label>
            <input type="text" name="default_value" class="form-control" maxlength="500">
          </div>
          <div class="mb-0">
            <label class="form-label">選択肢（任意・1行1件）</label>
            <textarea name="options_lines" class="form-control" rows="3" placeholder="リスト形式（Select / Radio / Checkbox）のとき：1行に1つ"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-primary">追加する</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
(function () {
  const tbody = document.getElementById('registration-fields-tbody');
  const orderInput = document.getElementById('field_order');
  const form = document.getElementById('registration-fields-form');
  if (!tbody || !orderInput || !form) return;

  function refreshOrder() {
    const ids = Array.from(tbody.querySelectorAll('tr[data-field-id]')).map((tr) => tr.getAttribute('data-field-id'));
    orderInput.value = ids.join(',');
  }

  function syncRequiredState(tr) {
    const fe = tr.querySelector('.js-form-enabled');
    const rq = tr.querySelector('.js-is-required');
    if (!fe || !rq) return;
    if (fe.checked) {
      rq.removeAttribute('disabled');
    } else {
      rq.checked = false;
      rq.setAttribute('disabled', 'disabled');
    }
  }

  tbody.querySelectorAll('tr[data-field-id]').forEach((tr) => syncRequiredState(tr));
  tbody.addEventListener('change', (e) => {
    if (e.target && e.target.classList.contains('js-form-enabled')) {
      syncRequiredState(e.target.closest('tr'));
    }
  });

  tbody.addEventListener('click', (e) => {
    const btn = e.target.closest('.btn-move-up, .btn-move-down');
    if (!btn || !tbody.contains(btn)) return;
    const tr = btn.closest('tr');
    if (!tr) return;
    if (btn.classList.contains('btn-move-up')) {
      const prev = tr.previousElementSibling;
      if (prev) tbody.insertBefore(tr, prev);
    } else {
      const next = tr.nextElementSibling;
      if (next) tbody.insertBefore(next, tr);
    }
    refreshOrder();
  });

  form.addEventListener('submit', () => refreshOrder());
  refreshOrder();
})();

(function () {
  const modal = document.getElementById('addFieldModal');
  const keyToggle = document.getElementById('add_set_field_key');
  const keyWrap = document.getElementById('add_field_key_wrap');
  const keyInput = document.getElementById('add_field_key');
  if (!modal || !keyToggle || !keyWrap || !keyInput) return;

  function syncAddFieldKeyUi() {
    const on = keyToggle.checked;
    keyWrap.classList.toggle('d-none', !on);
    keyInput.disabled = !on;
    if (!on) {
      keyInput.value = '';
      keyInput.removeAttribute('required');
    } else {
      keyInput.setAttribute('required', 'required');
    }
  }

  keyToggle.addEventListener('change', syncAddFieldKeyUi);
  modal.addEventListener('show.bs.modal', function () {
    keyToggle.checked = false;
    syncAddFieldKeyUi();
  });
  syncAddFieldKeyUi();
})();
</script>
@endpush