@extends('layouts.app')
@section('title', $scenario->name . ' - LINE一斉送信の作成')
@section('page-title', $scenario->name . ' - LINE一斉送信の作成')
@section('content')

<div class="d-flex align-items-center gap-2 mb-3">
  <a href="{{ route('scenario.line-broadcast.index', [$account, $scenario]) }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>送信一覧へ
  </a>
</div>

@if(! $lineAccount)
<div class="alert alert-warning small">
  このシナリオに <strong>LINEアカウントが紐づいていません</strong>。シナリオ設定で LINE アカウントを選んでから作成してください。
</div>
@endif

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

  <div class="card mb-3">
    <div class="card-header">送信内容</div>
    <div class="card-body">
      <div class="mb-3">
        <label class="form-label fw-semibold">管理用の名前 <span class="text-muted small fw-normal">（任意・あとで見分けるため）</span></label>
        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" maxlength="200" value="{{ old('name') }}" placeholder="例：9月キャンペーンのお知らせ">
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>

      @if($lineCustomSenders->isNotEmpty())
      <div class="mb-3">
        <label class="form-label fw-semibold" for="custom-sender">送信者（表示名・アイコン） <span class="badge text-bg-light border fw-normal">任意</span></label>
        <select id="custom-sender" name="custom_sender_id" class="form-select form-select-sm" style="max-width:22rem;">
          <option value="">公式アカウント名で送る（既定）</option>
          @foreach($lineCustomSenders as $sender)
            <option value="{{ $sender->id }}" {{ (string) old('custom_sender_id', $sender->is_default ? $sender->id : '') === (string) $sender->id ? 'selected' : '' }}>
              {{ $sender->name }}{{ $sender->is_default ? '（既定）' : '' }}
            </option>
          @endforeach
        </select>
        <div class="form-text">選ぶと、その名前・アイコンで届きます（LINE側の設定によっては反映されない場合があります）。</div>
      </div>
      @endif

      @if($lineTemplates->isNotEmpty())
      <div class="mb-2 d-flex align-items-center gap-2 flex-wrap">
        <label class="form-label small fw-semibold mb-0" for="line-template-pick">テンプレートから入れる</label>
        <select id="line-template-pick" class="form-select form-select-sm" style="max-width:18rem;">
          <option value="">選択してください</option>
          @foreach($lineTemplates as $tpl)
            <option value="{{ $tpl->id }}" data-body="{{ $tpl->body }}">{{ $tpl->name }}</option>
          @endforeach
        </select>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="line-template-apply">本文に入れる</button>
      </div>
      @endif

      <div class="mb-2">
        @include('account.scenario.partials._line_message_fields', [
          'row' => null,
          'textLabel' => 'メッセージ本文',
        ])
      </div>

      @if($readerFormFields->isNotEmpty() || $customPlaceholders->isNotEmpty())
      <div class="border rounded p-2 bg-light">
        <div class="small fw-semibold mb-1">置き換え文字（クリックで本文に挿入）</div>
        <div class="d-flex flex-wrap gap-1">
          @foreach($readerFormFields as $f)
            @if(!empty($f->form_enabled))
            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2 js-ph" data-token="%{{ $f->field_key }}%">
              <span class="small">{{ $f->label ?? $f->field_key }}</span> <code class="small">%{{ $f->field_key }}%</code>
            </button>
            @endif
          @endforeach
          @foreach($customPlaceholders as $p)
            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2 js-ph" data-token="%{{ $p->key }}%">
              <span class="small">{{ $p->label ?? $p->key }}</span> <code class="small">%{{ $p->key }}%</code>
            </button>
          @endforeach
        </div>
      </div>
      @endif
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">送信対象・タイミング</div>
    <div class="card-body">
      <p class="small mb-3">
        <span class="badge text-bg-light border">対象</span>
        このシナリオの<strong>有効な読者のうち、LINEでつながっている方</strong>：
        <strong class="text-primary">{{ (int) $targetCount }} 人</strong>
      </p>
      @if($scenarioLabels->isNotEmpty())
      <div class="border rounded p-2 bg-light mb-3">
        <div class="small fw-semibold mb-2">ラベルで絞り込む <span class="badge text-bg-light border fw-normal">任意</span></div>
        <div class="row g-3">
          <div class="col-md-6">
            <div class="small text-muted mb-1">このラベルが<strong>付いている人だけ</strong>に送る</div>
            @foreach($scenarioLabels as $label)
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" name="required_labels[]" value="{{ $label->name }}" id="req-label-{{ $label->id }}"
                {{ in_array($label->name, (array) old('required_labels', []), true) ? 'checked' : '' }}>
              <label class="form-check-label small" for="req-label-{{ $label->id }}">{{ $label->name }}</label>
            </div>
            @endforeach
          </div>
          <div class="col-md-6">
            <div class="small text-muted mb-1">このラベルが<strong>付いている人は除く</strong></div>
            @foreach($scenarioLabels as $label)
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" name="excluded_labels[]" value="{{ $label->name }}" id="exc-label-{{ $label->id }}"
                {{ in_array($label->name, (array) old('excluded_labels', []), true) ? 'checked' : '' }}>
              <label class="form-check-label small" for="exc-label-{{ $label->id }}">{{ $label->name }}</label>
            </div>
            @endforeach
          </div>
        </div>
        <div class="form-text mt-2">何も選ばなければ、LINEでつながっている有効な読者<strong>全員</strong>に送ります。必須ラベルを複数選ぶと<strong>すべて</strong>付いている人が対象です。</div>
      </div>
      @endif

      <div class="mb-1">
        <label class="form-label fw-semibold">配信日時 <span class="text-muted small fw-normal">（任意）</span></label>
        <input type="datetime-local" name="scheduled_at" class="form-control @error('scheduled_at') is-invalid @enderror" value="{{ old('scheduled_at') }}" style="max-width:16rem;">
        @error('scheduled_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text"><strong>空欄なら今すぐ送信</strong>します。未来の日時を入れると、その時刻に自動で送信されます。</div>
      </div>
    </div>
  </div>

  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary" @disabled(! $lineAccount)><i class="bi bi-send me-1"></i>送信する</button>
    <a href="{{ route('scenario.line-broadcast.index', [$account, $scenario]) }}" class="btn btn-outline-secondary">キャンセル</a>
  </div>
</form>

@push('scripts')
<script>
(function () {
  var pick = document.getElementById('line-template-pick');
  var apply = document.getElementById('line-template-apply');
  if (!pick || !apply) return;
  apply.addEventListener('click', function () {
    var opt = pick.options[pick.selectedIndex];
    if (!opt || !opt.value) return;
    var ta = document.querySelector('textarea[name="message_text"]');
    if (!ta) return;
    var body = opt.dataset.body || '';
    if (ta.value.trim() !== '' && !confirm('本文をテンプレートの内容で置き換えますか？')) return;
    ta.value = body;
    ta.focus();
  });
})();

document.querySelectorAll('.js-ph').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var ta = document.querySelector('textarea[name="message_text"]');
    if (!ta) return;
    var token = btn.dataset.token || '';
    var start = ta.selectionStart || 0, end = ta.selectionEnd || 0;
    ta.value = ta.value.slice(0, start) + token + ta.value.slice(end);
    ta.focus();
    ta.selectionStart = ta.selectionEnd = start + token.length;
  });
});
</script>
@endpush
@endsection