@extends('layouts.app')
@section('title', $scenario->name . ' - 一斉送信 #' . $broadcast->id)
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@section('page-title', $scenario->name . ' - 一斉送信 #' . $broadcast->id)
@push('styles')
<style>
.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('success'))
  <div class="alert alert-success py-2 small mb-3">{{ session('success') }}</div>
@endif
@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>

@php $st = $broadcast->status ?? ''; @endphp
<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-2">
      <div>
        <h2 class="h5 mb-1">状態</h2>
        @if($st === 'pending' && $broadcast->scheduled_at && $broadcast->scheduled_at->isFuture())
          <span class="badge text-bg-warning">予約中</span>
        @elseif($st === 'completed')
          <span class="badge text-bg-success">完了</span>
        @elseif($st === 'processing')
          <span class="badge text-bg-primary">処理中</span>
        @elseif($st === 'failed')
          <span class="badge text-bg-danger">失敗</span>
        @else
          <span class="badge text-bg-secondary">待機</span>
        @endif
      </div>
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('scenario.broadcast.index', [$account, $scenario]) }}" class="btn btn-sm btn-outline-secondary">一覧へ</a>
        <a href="{{ route('scenario.broadcast.create', [$account, $scenario]) }}" class="btn btn-sm btn-outline-primary">新規作成</a>
      </div>
    </div>
    @php $isImmediatePending = $st === 'pending' && ! ($broadcast->scheduled_at && $broadcast->scheduled_at->isFuture()); @endphp
    @if($isImmediatePending)
      <div class="alert alert-info small d-flex align-items-start gap-2 mb-3" role="status">
        <i class="bi bi-hourglass-split mt-1"></i>
        <div>
          <div class="fw-semibold mb-1">「待機」= 配信の順番待ちです（即時配信）</div>
          即時配信は送信キューに入り、サーバが順番に処理して <span class="badge text-bg-success">完了</span> に変わります。通常は<strong>数分以内</strong>に配信されます。この画面は自動更新されないので、少し待ってから再読み込みしてください。<br>
          <span class="text-muted">長時間「待機」のままメールが届かない場合は、配信処理（キュー）が停止している可能性があります。その際は管理者にご連絡ください。</span>
        </div>
      </div>
    @elseif($st === 'pending' && $broadcast->scheduled_at && $broadcast->scheduled_at->isFuture())
      <div class="alert alert-info small d-flex align-items-start gap-2 mb-3" role="status">
        <i class="bi bi-clock-history mt-1"></i>
        <div><span class="fw-semibold">予約中</span>です。指定した配信日時（{{ $broadcast->scheduled_at->format('Y-m-d H:i') }}）になると自動で配信されます。それまで操作は不要です。</div>
      </div>
    @endif
    <dl class="row small mb-0">
      <dt class="col-sm-3 text-muted">名前</dt>
      <dd class="col-sm-9">{{ $broadcast->name !== null && $broadcast->name !== '' ? $broadcast->name : '—' }}</dd>
      <dt class="col-sm-3 text-muted">対象</dt>
      <dd class="col-sm-9">有効な読者（メールあり）</dd>
      <dt class="col-sm-3 text-muted">形式</dt>
      <dd class="col-sm-9">{{ ($broadcast->mail_format ?? '') === 'text' ? 'テキスト' : 'HTML' }}</dd>
      <dt class="col-sm-3 text-muted">配信日時</dt>
      <dd class="col-sm-9">{{ $broadcast->scheduled_at?->format('Y-m-d H:i:s') ?? '即時' }}</dd>
      <dt class="col-sm-3 text-muted">キュー投入日時</dt>
      <dd class="col-sm-9">{{ $broadcast->queued_at?->format('Y-m-d H:i:s') ?? '—' }}</dd>
      <dt class="col-sm-3 text-muted">送信数 / 対象数</dt>
      <dd class="col-sm-9">
        @if($st === 'pending')
          <span class="text-muted">配信処理の完了後に集計されます（対象読者数はここに表示されます）</span>
        @else
          {{ (int) $broadcast->sent_count }} / {{ (int) $broadcast->total_targets }}
        @endif
      </dd>
      <dt class="col-sm-3 text-muted">失敗数</dt>
      <dd class="col-sm-9">{{ (int) $broadcast->failed_count }}</dd>
      <dt class="col-sm-3 text-muted">完了日時</dt>
      <dd class="col-sm-9">{{ $broadcast->completed_at?->format('Y-m-d H:i:s') ?? '—' }}</dd>
    </dl>
    @if($broadcast->last_error)
      <div class="alert alert-warning small mb-0 mt-3 py-2">
        <div class="fw-semibold mb-1">最後のエラー</div>
        <pre class="small mb-0 text-break" style="white-space: pre-wrap;">{{ $broadcast->last_error }}</pre>
      </div>
    @endif
  </div>
</div>
@if($st === 'pending')
<script>
// 待機（処理前）のときは、完了に変わるまで自動で再読み込みして最新の送信数/対象数を表示する。
setTimeout(function () { window.location.reload(); }, 12000);
</script>
@endif
@endsection