@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; }
.delivery-page-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.delivery-page-tabs .tab-item {
  text-decoration: none;
  color: #5f6d84;
  font-size: 0.92rem;
  padding: 9px 2px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.delivery-page-tabs .tab-item.active {
  color: #2b4f9b;
  border-bottom-color: #4f77cf;
  font-weight: 600;
}
</style>
@endpush
@section('content')
@if(session('error'))
  <div class="alert alert-danger py-2 small mb-3">{{ session('error') }}</div>
@endif
<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 active"><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>{{ (int) $targetCount }}</strong> 名。送信元はシナリオ設定の既定 → 送信用アカウントの送信元（ステップメールと同じ優先）です。保存後は <strong>キュー</strong>で送信が進みます。
</p>

<form method="POST" action="{{ route('scenario.broadcast.store', [$account, $scenario]) }}" id="broadcast-store-form">
  @csrf
  <input type="hidden" name="audience" value="all_active">

  <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" maxlength="200" value="{{ old('name') }}" placeholder="例: 2026年春のお知らせ">
      @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
      <div class="mt-3">
        <label class="form-label fw-semibold small">配信日時（任意）</label>
        <input type="datetime-local" name="scheduled_at" class="form-control form-control-sm @error('scheduled_at') is-invalid @enderror" value="{{ old('scheduled_at') }}">
        @error('scheduled_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">空欄なら今すぐキューに入れます。指定した場合はその日時以降にキューで送信されます（{{ config('app.timezone') }}）。</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-12">
          <label class="form-label fw-semibold small">件名</label>
          <input type="text" name="subject" class="form-control form-control-sm @error('subject') is-invalid @enderror" maxlength="500" value="{{ old('subject') }}">
          @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </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="bc_mf_html" value="html" autocomplete="off" {{ old('mail_format', 'html') === 'html' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="bc_mf_html">HTML</label>
            <input type="radio" class="btn-check" name="mail_format" id="bc_mf_text" value="text" autocomplete="off" {{ old('mail_format') === 'text' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="bc_mf_text">テキスト</label>
          </div>
        </div>
        <div class="col-lg-8">
          <label class="form-label fw-semibold small">本文</label>
          <div id="bc-wrap-html" class="{{ old('mail_format', 'html') === 'html' ? '' : 'd-none' }}">
            <textarea name="body_html" id="bc_body_html" rows="12" class="form-control form-control-sm font-monospace @error('body_html') is-invalid @enderror">{{ old('body_html') }}</textarea>
            @error('body_html')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div id="bc-wrap-text" class="{{ old('mail_format') === 'text' ? '' : 'd-none' }}">
            <textarea name="body_text" id="bc_body_text" rows="12" class="form-control form-control-sm font-monospace @error('body_text') is-invalid @enderror">{{ old('body_text') }}</textarea>
            @error('body_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
        <div class="col-lg-4">
          @include('account.scenario.partials.step_mail_placeholder_chips', [
            'mode' => 'bc',
            'readerFormFields' => $readerFormFields,
            'customPlaceholders' => $customPlaceholders,
          ])
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex flex-wrap gap-2 mb-5">
    <a href="{{ route('scenario.broadcast.index', [$account, $scenario]) }}" class="btn btn-outline-secondary">一覧へ戻る</a>
    <button type="submit" class="btn btn-warning text-dark fw-semibold">保存して配信予約</button>
  </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
  function toggleMailFmt() {
    var htmlOn = document.getElementById('bc_mf_html');
    var wh = document.getElementById('bc-wrap-html');
    var wt = document.getElementById('bc-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('bc_body_html');
    var tt = document.getElementById('bc_body_text');
    if (th) th.disabled = !isHtml;
    if (tt) tt.disabled = isHtml;
  }

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

  document.querySelectorAll('.bc-insert-token').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var tok = btn.getAttribute('data-token');
      if (!tok) return;
      var htmlOn = document.getElementById('bc_mf_html');
      var ta = (htmlOn && htmlOn.checked) ? document.getElementById('bc_body_html') : document.getElementById('bc_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