@php
  $saveFormId = 'ph-save-'.(int) $scenario->id;
@endphp
@push('styles')
<style>
.ph-page .ph-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2b4f9b 45%, #3d6ab8 100%);
  color: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 24px rgba(43, 79, 155, 0.22);
}
.ph-page .ph-hero h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.35rem; }
.ph-page .ph-hero p { margin: 0; opacity: 0.92; font-size: 0.85rem; line-height: 1.55; }
.ph-page .ph-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.ph-page .ph-card-h {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}
.ph-page .ph-card-b { padding: 1.25rem 1.25rem 1.1rem; }
.ph-page .ph-id-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
}
.ph-page .ph-id-wrap input { max-width: 14rem; }
.ph-page .ph-table-wrap { border-radius: 8px; border: 1px solid #e2e8f0; overflow: hidden; }
.ph-page .ph-add-block { max-width: 42rem; }
</style>
@endpush

<div class="ph-page">
  <div class="ph-hero">
    <h2><i class="bi bi-braces me-2"></i>独自置き換え文字</h2>
    <p>この送信用アカウント共通の置き換え文字を定義します。メール本文などに <code>%original-…%</code> 形式で記述し、<strong>全シナリオ共通の値</strong>と、必要ならこのシナリオだけの<strong>シナリオ固有の値</strong>を分けて保存できます。テンプレへの実展開は<strong>未接続</strong>です。</p>
  </div>

  @if($accountCustomPlaceholders->isNotEmpty())
    <form id="{{ $saveFormId }}" method="POST" action="{{ route('scenario.workspace.placeholders.update', [$account, $scenario]) }}" class="d-inline">
      @csrf
      @method('PUT')
    </form>
    <div class="ph-card">
      <div class="ph-card-h">登録一覧（この送信用アカウント共通）</div>
      <div class="ph-card-b">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
          <p class="text-muted small mb-0">同一キーは全シナリオで共有されます。削除すると<strong>全シナリオ</strong>から消えます。</p>
          <button type="submit" form="{{ $saveFormId }}" class="btn btn-success btn-sm px-3"><i class="bi bi-check2 me-1"></i>保存</button>
        </div>
        <div class="ph-table-wrap table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th style="min-width:11rem">置き換え文字</th>
                <th style="min-width:10rem">管理名称</th>
                <th style="min-width:14rem">全シナリオ共通の値</th>
                <th style="min-width:9rem">シナリオ固有の値</th>
                <th style="min-width:12rem">このシナリオの上書き</th>
                <th style="width:5rem"></th>
              </tr>
            </thead>
            <tbody>
              @foreach($accountCustomPlaceholders as $ph)
                @php
                  $sv = $scenarioPlaceholderValuesByPhId->get($ph->id);
                  $mode = old('rows.'.$ph->id.'.scenario_mode', $sv?->scenario_mode ?? 'none');
                  $sval = old('rows.'.$ph->id.'.scenario_value', $sv?->scenario_value);
                @endphp
                <tr>
                  <td><code class="user-select-all small">{{ $ph->displayToken() }}</code></td>
                  <td>
                    <input type="text" form="{{ $saveFormId }}" name="rows[{{ $ph->id }}][management_name]" class="form-control form-control-sm @error('rows.'.$ph->id.'.management_name') is-invalid @enderror" value="{{ old('rows.'.$ph->id.'.management_name', $ph->management_name) }}" maxlength="200" required>
                    @error('rows.'.$ph->id.'.management_name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                  </td>
                  <td>
                    <textarea form="{{ $saveFormId }}" name="rows[{{ $ph->id }}][common_value]" class="form-control form-control-sm @error('rows.'.$ph->id.'.common_value') is-invalid @enderror" rows="3" maxlength="50000">{{ old('rows.'.$ph->id.'.common_value', $ph->common_value) }}</textarea>
                    @error('rows.'.$ph->id.'.common_value')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                  </td>
                  <td>
                    <select form="{{ $saveFormId }}" name="rows[{{ $ph->id }}][scenario_mode]" class="form-select form-select-sm ph-row-mode" data-ph-row="{{ $ph->id }}">
                      <option value="none" {{ $mode === 'none' ? 'selected' : '' }}>利用しない</option>
                      <option value="override" {{ $mode === 'override' ? 'selected' : '' }}>利用する</option>
                    </select>
                  </td>
                  <td>
                    <textarea form="{{ $saveFormId }}" name="rows[{{ $ph->id }}][scenario_value]" class="form-control form-control-sm ph-row-val" data-ph-row-val="{{ $ph->id }}" rows="3" maxlength="50000" {{ $mode === 'none' ? 'disabled' : '' }}>{{ old('rows.'.$ph->id.'.scenario_value', $sval) }}</textarea>
                    @error('rows.'.$ph->id.'.scenario_value')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                  </td>
                  <td>
                    <form method="POST" action="{{ route('scenario.workspace.placeholders.destroy', [$account, $scenario, $ph]) }}" onsubmit="return confirm('この定義を削除しますか？\n（この送信用アカウントの全シナリオから消えます）');">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-outline-danger btn-sm">削除</button>
                    </form>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  @else
    <div class="ph-card">
      <div class="ph-card-b">
        <p class="text-muted small mb-0">まだ登録がありません。下のフォームから追加してください。</p>
      </div>
    </div>
  @endif

  <div class="ph-card">
    <div class="ph-card-h">新規追加</div>
    <div class="ph-card-b ph-add-block">
      <form method="POST" action="{{ route('scenario.workspace.placeholders.store', [$account, $scenario]) }}" class="d-flex flex-column gap-3">
        @csrf
        <div>
          <label class="form-label fw-semibold" for="ph_management_name">管理名称</label>
          <input type="text" name="management_name" id="ph_management_name" class="form-control @error('management_name') is-invalid @enderror" value="{{ old('management_name') }}" maxlength="200" required>
          @error('management_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div>
          <label class="form-label fw-semibold">ID（置き換え文字）</label>
          <div class="ph-id-wrap text-dark">
            <span>%original-</span>
            <input type="text" name="token_suffix" id="ph_token_suffix" class="form-control form-control-sm d-inline-block @error('token_suffix') is-invalid @enderror" value="{{ old('token_suffix') }}" maxlength="55" placeholder="my_code" {{ old('set_token_suffix') ? '' : 'disabled' }} data-ph-suffix>
            <span>%</span>
          </div>
          @error('token_suffix')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
          <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" value="1" name="set_token_suffix" id="ph_set_suffix" {{ old('set_token_suffix') ? 'checked' : '' }} data-ph-set-suffix>
            <label class="form-check-label small" for="ph_set_suffix">ID を自分で指定する（オフのときは <code>original-</code> に続くキーを自動採番）</label>
          </div>
        </div>
        <div>
          <label class="form-label fw-semibold" for="ph_common_value">全シナリオ共通の値</label>
          <textarea name="common_value" id="ph_common_value" rows="4" class="form-control @error('common_value') is-invalid @enderror" maxlength="50000">{{ old('common_value') }}</textarea>
          @error('common_value')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label fw-semibold" for="ph_add_mode">シナリオ固有の値</label>
            <select name="add_scenario_mode" id="ph_add_mode" class="form-select form-select-sm @error('add_scenario_mode') is-invalid @enderror" data-ph-add-mode>
              <option value="none" {{ old('add_scenario_mode', 'none') === 'none' ? 'selected' : '' }}>利用しない</option>
              <option value="override" {{ old('add_scenario_mode') === 'override' ? 'selected' : '' }}>利用する</option>
            </select>
            @error('add_scenario_mode')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-8">
            <label class="form-label fw-semibold" for="ph_add_scenario_value">このシナリオの上書き（利用する場合）</label>
            <textarea name="add_scenario_value" id="ph_add_scenario_value" rows="3" class="form-control form-control-sm @error('add_scenario_value') is-invalid @enderror" maxlength="50000" data-ph-add-val {{ old('add_scenario_mode', 'none') === 'none' ? 'disabled' : '' }}>{{ old('add_scenario_value') }}</textarea>
            @error('add_scenario_value')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
        <div>
          <button type="submit" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>追加</button>
        </div>
      </form>
    </div>
  </div>

  <a href="{{ route('scenario.workspace.show', [$account, $scenario]) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-house-door me-1"></i>シナリオ概要へ戻る</a>
</div>

@push('scripts')
<script>
(function () {
  function bindModeSelect(sel, valSel) {
    if (!sel || !valSel) return;
    function sync() {
      var on = sel.value === 'override';
      valSel.disabled = !on;
      if (!on) valSel.value = '';
    }
    sel.addEventListener('change', sync);
    sync();
  }
  document.querySelectorAll('.ph-row-mode').forEach(function (sel) {
    var id = sel.getAttribute('data-ph-row');
    var ta = document.querySelector('[data-ph-row-val="' + id + '"]');
    bindModeSelect(sel, ta);
  });
  var addMode = document.querySelector('[data-ph-add-mode]');
  var addVal = document.querySelector('[data-ph-add-val]');
  bindModeSelect(addMode, addVal);

  var chk = document.getElementById('ph_set_suffix');
  var suf = document.querySelector('[data-ph-suffix]');
  if (chk && suf) {
    function syncSuf() {
      suf.disabled = !chk.checked;
      if (!chk.checked) suf.value = '';
    }
    chk.addEventListener('change', syncSuf);
    syncSuf();
  }
})();
</script>
@endpush