@extends('layouts.app')
@section('title', $scenario->name . ' - ステップを追加')
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@section('page-title', $scenario->name . ' - ステップを追加')
@push('styles')
<style>
.step-create-utage-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 1rem;
}
.step-create-utage-h {
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
}
.step-create-utage-b { padding: 0.75rem 0.85rem 0.85rem; }
.step-create-ph-mini { max-height: 14rem; overflow-y: auto; font-size: 0.75rem; }
</style>
@endpush
@section('content')
<div class="delivery-page-tabs">
  <a href="{{ route('account.index') }}" class="tab-item"><i class="bi bi-list-ul" aria-hidden="true"></i>送信用アカウント一覧</a>
  <a href="{{ route('scenario.index', $account) }}" class="tab-item"><i class="bi bi-diagram-2" aria-hidden="true"></i>{{ $account->name }} / シナリオ一覧</a>
  <a href="{{ route('scenario.workspace.show', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-house-door" aria-hidden="true"></i>{{ $scenario->name }} / 概要</a>
  <a href="{{ route('subscriber.index', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-people" aria-hidden="true"></i>読者一覧</a>
  <a href="{{ route('scenario.broadcast.index', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-send" aria-hidden="true"></i>メール一斉</a>
  <a href="{{ route('step.index', [$account, $scenario]) }}" class="tab-item"><i class="bi bi-clock-history" aria-hidden="true"></i>ステップ配信</a>
</div>

<p class="small text-muted mb-3">
  入力後は<strong>ステップ編集</strong>へ進み、URL 置換・テスト送信 UI など続きを設定できます。
</p>

<form method="POST" action="{{ route('step.store', [$account, $scenario]) }}" id="step-store-form">
  @csrf
  <div class="step-create-utage-card">
    <div class="step-create-utage-h">基本</div>
    <div class="step-create-utage-b">
      <label class="form-label fw-semibold small">ステップ名</label>
      <input type="text" name="name" class="form-control form-control-sm @error('name') is-invalid @enderror" required maxlength="200" value="{{ old('name') }}">
      @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
  </div>

  <div class="step-create-utage-card">
      <div class="step-create-utage-h">配信条件</div>
      <div class="step-create-utage-b">
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="delivery_condition_mode" id="create_cond_all" value="all"
            {{ old('delivery_condition_mode', 'all') === 'all' ? 'checked' : '' }}>
          <label class="form-check-label small" for="create_cond_all">シナリオ登録者全員に配信（条件を指定しない）</label>
        </div>
        <div class="form-check mb-0">
          <input class="form-check-input" type="radio" name="delivery_condition_mode" id="create_cond_cond" value="conditional"
            {{ old('delivery_condition_mode') === 'conditional' ? 'checked' : '' }}>
          <label class="form-check-label small" for="create_cond_cond">条件に該当する登録者に配信（条件を指定する）</label>
        </div>
        <div class="form-text small mt-2 mb-0">条件ビルダー・対象者確認は送信エンジン接続後。選択値は保存されます。</div>
        <div class="row g-2 mt-2">
          <div class="col-md-6">
            <label class="form-label small fw-semibold" for="create_condition_required_labels">必須ラベル</label>
            <textarea name="condition_required_labels" id="create_condition_required_labels" rows="3" class="form-control form-control-sm" placeholder="1行に1つ">{{ old('condition_required_labels') }}</textarea>
            <div class="form-text small">すべてのラベルを持つ読者だけに送信します。</div>
          </div>
          <div class="col-md-6">
            <label class="form-label small fw-semibold" for="create_condition_excluded_labels">除外ラベル</label>
            <textarea name="condition_excluded_labels" id="create_condition_excluded_labels" rows="3" class="form-control form-control-sm" placeholder="1行に1つ">{{ old('condition_excluded_labels') }}</textarea>
            <div class="form-text small">いずれかのラベルを持つ読者には送信しません。</div>
          </div>
        </div>
      </div>
    </div>

    <div class="step-create-utage-card">
      <div class="step-create-utage-h">配信メール</div>
      <div class="step-create-utage-b">
        @include('account.scenario.partials.step_mail_from_defaults', ['extended' => $extended, 'account' => $mailAccount ?? $account])
        <div class="row g-2 mb-2">
          <div class="col-md-6">
            <label class="form-label fw-semibold small">送信者名</label>
            <input type="text" name="mail_from_name" class="form-control form-control-sm" value="{{ old('mail_from_name') }}" placeholder="任意（空欄なら上記の既定）" autocomplete="organization">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold small">送信者メールアドレス</label>
            <input type="email" name="mail_from_email" class="form-control form-control-sm" value="{{ old('mail_from_email') }}" placeholder="任意（空欄なら上記の既定）" autocomplete="email">
          </div>
          <div class="col-md-8">
            <label class="form-label fw-semibold small">件名</label>
            <input type="text" name="subject" class="form-control form-control-sm" maxlength="500" value="{{ old('subject') }}">
          </div>
          <div class="col-md-4 d-flex align-items-end pb-1">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="ab_test_enabled" id="create_ab" value="1" {{ old('ab_test_enabled') ? 'checked' : '' }}>
              <label class="form-check-label small" for="create_ab">A/Bテストを行う（保存のみ）</label>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label fw-semibold small d-block">種類（本文）</label>
            <div class="btn-group btn-group-sm" role="group">
              <input type="radio" class="btn-check" name="mail_format" id="create_mf_html" value="html" autocomplete="off" {{ old('mail_format', 'html') === 'html' ? 'checked' : '' }}>
              <label class="btn btn-outline-primary" for="create_mf_html">HTML</label>
              <input type="radio" class="btn-check" name="mail_format" id="create_mf_text" value="text" autocomplete="off" {{ old('mail_format') === 'text' ? 'checked' : '' }}>
              <label class="btn btn-outline-primary" for="create_mf_text">テキスト</label>
            </div>
          </div>
          <div class="col-lg-8">
            <label class="form-label fw-semibold small">本文</label>
            <div id="create-wrap-html" class="{{ old('mail_format', 'html') === 'html' ? '' : 'd-none' }}">
              <textarea name="body_html" id="create_body_html" rows="12" class="form-control form-control-sm font-monospace">{{ old('body_html') }}</textarea>
            </div>
            <div id="create-wrap-text" class="{{ old('mail_format') === 'text' ? '' : 'd-none' }}">
              <textarea name="body_text" id="create_body_text" rows="12" class="form-control form-control-sm font-monospace">{{ old('body_text') }}</textarea>
            </div>
          </div>
          <div class="col-lg-4">
            @include('account.scenario.partials.step_mail_placeholder_chips', [
              'mode' => 'create',
              'readerFormFields' => $readerFormFields,
              'customPlaceholders' => $customPlaceholders,
            ])
          </div>
        </div>
      </div>
    </div>

    <div class="step-create-utage-card">
      <div class="step-create-utage-h">プレビューに表示するテキスト</div>
      <div class="step-create-utage-b">
        <input type="text" name="preview_text" class="form-control form-control-sm" maxlength="500" value="{{ old('preview_text') }}" placeholder="任意（未接続時は保存のみ）">
      </div>
    </div>

  @php
    $oldSched = old('schedule_mode', 'registration_plus_days');
  @endphp
  <div class="step-create-utage-card">
    <div class="step-create-utage-h">送信のタイミング <span class="text-danger small">必須</span></div>
    <div class="step-create-utage-b">
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="schedule_mode" id="create_sched_imm" value="registration_immediate" {{ $oldSched === 'registration_immediate' ? 'checked' : '' }}>
        <label class="form-check-label small" for="create_sched_imm">シナリオ登録直後</label>
      </div>
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="schedule_mode" id="create_sched_days" value="registration_plus_days" {{ $oldSched === 'registration_plus_days' ? 'checked' : '' }}>
        <label class="form-check-label small" for="create_sched_days">送信日を指定（登録〇日後の〇時〇分）</label>
      </div>
      <div class="form-check mb-3">
        <input class="form-check-input" type="radio" name="schedule_mode" id="create_sched_hours" value="registration_plus_hours" {{ $oldSched === 'registration_plus_hours' ? 'checked' : '' }}>
        <label class="form-check-label small" for="create_sched_hours">送信日を指定（登録〇時間〇分後）</label>
      </div>

      <div id="create-row-delay-days" class="row g-2 align-items-end mb-2 {{ $oldSched === 'registration_plus_days' ? '' : 'd-none' }}">
        <div class="col-auto">
          <label class="form-label small mb-0">登録から</label>
          <input type="number" name="delay_days" class="form-control form-control-sm" style="width:4.5rem" min="0" max="3650" value="{{ old('delay_days', 0) }}">
        </div>
        <div class="col-auto pb-1 small">日後</div>
        <div class="col-auto">
          <label class="form-label small mb-0">時刻</label>
          <input type="time" name="delay_time" class="form-control form-control-sm" value="{{ old('delay_time', '09:00') }}">
        </div>
      </div>

      <div id="create-row-delay-hours" class="row g-2 mb-0 {{ $oldSched === 'registration_plus_hours' ? '' : 'd-none' }}">
        <div class="col-auto">
          <label class="form-label small mb-0">時間</label>
          <input type="number" name="delay_hours_after" class="form-control form-control-sm" style="width:4.5rem" min="0" max="8760" value="{{ old('delay_hours_after', 0) }}">
        </div>
        <div class="col-auto">
          <label class="form-label small mb-0">分</label>
          <input type="number" name="delay_minutes_after" class="form-control form-control-sm" style="width:3.5rem" min="0" max="59" value="{{ old('delay_minutes_after', 0) }}">
        </div>
      </div>
    </div>
  </div>

  <div class="step-create-utage-card">
    <div class="step-create-utage-h">送信後アクション</div>
    <div class="step-create-utage-b">
      <div class="row g-2">
        <div class="col-md-6">
          <label class="form-label small fw-semibold" for="create_action_add_labels">付与するラベル</label>
          <textarea name="action_add_labels" id="create_action_add_labels" rows="3" class="form-control form-control-sm" placeholder="1行に1つ">{{ old('action_add_labels') }}</textarea>
        </div>
        <div class="col-md-6">
          <label class="form-label small fw-semibold" for="create_action_remove_labels">除外するラベル</label>
          <textarea name="action_remove_labels" id="create_action_remove_labels" rows="3" class="form-control form-control-sm" placeholder="1行に1つ">{{ old('action_remove_labels') }}</textarea>
        </div>
        <div class="col-md-7">
          <label class="form-label small fw-semibold" for="create_action_transition_scenario_id">別シナリオへ登録</label>
          <select name="action_transition_scenario_id" id="create_action_transition_scenario_id" class="form-select form-select-sm">
            <option value="">登録しない</option>
            @foreach($transitionScenarios as $targetScenario)
              <option value="{{ $targetScenario->id }}" @selected((string) old('action_transition_scenario_id') === (string) $targetScenario->id)>{{ $targetScenario->name }}</option>
            @endforeach
          </select>
          @error('action_transition_scenario_id')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-5 d-flex flex-column justify-content-end gap-2">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="action_deactivate_current" id="create_action_deactivate_current" value="1" {{ old('action_deactivate_current') ? 'checked' : '' }}>
            <label class="form-check-label small" for="create_action_deactivate_current">このシナリオの読者を停止する</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="action_deactivate_after_transition" id="create_action_deactivate_after_transition" value="1" {{ old('action_deactivate_after_transition') ? 'checked' : '' }}>
            <label class="form-check-label small" for="create_action_deactivate_after_transition">別シナリオ登録後、このシナリオを停止する</label>
          </div>
        </div>
      </div>
      <div class="form-text small mt-2">メール送信が成功したあと、送信済み記録と同じ処理内で実行します。</div>
    </div>
  </div>

  <div class="step-create-utage-card">
    <div class="step-create-utage-h">既存読者への送信</div>
    <div class="step-create-utage-b">
      <select name="existing_reader_policy" class="form-select form-select-sm">
        <option value="reserve_skip_late" {{ old('existing_reader_policy', 'reserve_skip_late') === 'reserve_skip_late' ? 'selected' : '' }}>配信時刻前の読者：予約／後から登録：送らない（論理はエンジン接続後）</option>
        <option value="schedule_all_readers" {{ old('existing_reader_policy') === 'schedule_all_readers' ? 'selected' : '' }}>既存・新規ともスケジュールに従う</option>
        <option value="skip_existing_readers" {{ old('existing_reader_policy') === 'skip_existing_readers' ? 'selected' : '' }}>追加前からの読者には送らない</option>
      </select>
    </div>
  </div>

  <div class="mb-5">
    <div class="d-flex flex-wrap gap-2">
      <a href="{{ route('step.index', [$account, $scenario]) }}" class="btn btn-outline-secondary">一覧へ戻る</a>
      <button type="submit" class="btn btn-warning text-dark fw-semibold"><i class="bi bi-arrow-right-circle me-1"></i>追加して詳細設定へ進む</button>
    </div>
    <div class="form-text mt-2"><i class="bi bi-info-circle"></i> 「追加」を押すと、この内容でステップが作成され、続けて<strong>詳細設定画面</strong>（配信タイミング・本文・URL置換など）へ進みます。</div>
  </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
  function toggleSched() {
    var m = document.querySelector('#step-store-form input[name="schedule_mode"]:checked');
    var mode = m ? m.value : 'registration_plus_days';
    var rowD = document.getElementById('create-row-delay-days');
    var rowH = document.getElementById('create-row-delay-hours');
    if (rowD) rowD.classList.toggle('d-none', mode !== 'registration_plus_days');
    if (rowH) rowH.classList.toggle('d-none', mode !== 'registration_plus_hours');
  }

  function toggleMailFmt() {
    var htmlOn = document.getElementById('create_mf_html');
    var wh = document.getElementById('create-wrap-html');
    var wt = document.getElementById('create-wrap-text');
    if (!htmlOn || !wh || !wt) return;
    var isHtml = htmlOn.checked;
    wh.classList.toggle('d-none', !isHtml);
    wt.classList.toggle('d-none', isHtml);
    var th = document.getElementById('create_body_html');
    var tt = document.getElementById('create_body_text');
    if (th) th.disabled = !isHtml;
    if (tt) tt.disabled = isHtml;
  }

  document.querySelectorAll('#step-store-form input[name="schedule_mode"]').forEach(function (el) {
    el.addEventListener('change', toggleSched);
  });
  toggleSched();

  var mfHtml = document.getElementById('create_mf_html');
  var mfText = document.getElementById('create_mf_text');
  if (mfHtml) mfHtml.addEventListener('change', toggleMailFmt);
  if (mfText) mfText.addEventListener('change', toggleMailFmt);
  toggleMailFmt();

  document.querySelectorAll('.create-insert-token').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var tok = btn.getAttribute('data-token');
      if (!tok) return;
      var htmlOn = document.getElementById('create_mf_html');
      var ta = (htmlOn && htmlOn.checked) ? document.getElementById('create_body_html') : document.getElementById('create_body_text');
      if (!ta || ta.disabled) return;
      var start = ta.selectionStart != null ? ta.selectionStart : ta.value.length;
      var end = ta.selectionEnd != null ? ta.selectionEnd : ta.value.length;
      ta.value = ta.value.slice(0, start) + tok + ta.value.slice(end);
      ta.focus();
      ta.selectionStart = ta.selectionEnd = start + tok.length;
    });
  });
})();
</script>
@endpush