@extends('layouts.app')
@section('title', '読者一覧')
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@section('page-title', $scenario->name . ' - 読者一覧')
@push('styles')
<style>
.delivery-page-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 14px;
}
.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;
}
.delivery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.reader-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.reader-filter .form-control, .reader-filter .form-select {
  width: auto;
  min-width: 180px;
}
.reader-table-wrap { overflow-x: auto; }
.reader-table th:first-child, .reader-table td:first-child { width: 2.25rem; text-align: center; vertical-align: middle; }
</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>
  <span class="tab-item active d-inline-flex align-items-center gap-1"><i class="bi bi-people" aria-hidden="true"></i>読者一覧</span>
  <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="text-muted small mb-3">このシナリオに登録された読者の一覧です。<strong>登録経路</strong>（公開フォーム／LINE／手動）で絞り込み、<strong>手動で追加</strong>、<strong>複数選択してステータス変更</strong>ができます。<strong>「有効」</strong>は配信の対象という意味です。<i class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-title="「有効」は配信対象を表す印で、メールが実際に受信箱へ届くことを保証するものではありません。登録時にメールの形式とドメインを簡易的に確認しています。" aria-hidden="true"></i></p>

<div class="delivery-toolbar">
  <div class="d-flex flex-wrap align-items-center gap-2">
    <a href="{{ route('scenario.index', $account) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>シナリオ一覧</a>
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modal-add-subscriber"><i class="bi bi-person-plus me-1"></i>読者を追加</button>
    <button type="button" class="btn btn-sm btn-outline-success" id="btn-bulk-active" form="bulk-status-form"><i class="bi bi-check2-circle me-1"></i>選択を有効</button>
    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-bulk-inactive" form="bulk-status-form"><i class="bi bi-pause-circle me-1"></i>選択を停止</button>
  </div>
  <span class="text-muted small">全 {{ $subscribers->total() }} 名（このページ {{ $subscribers->count() }} 名）</span>
</div>

<form id="bulk-status-form" method="POST" action="{{ route('subscriber.bulk-status', ['account' => $account, 'scenario' => $scenario]) }}" class="visually-hidden" aria-hidden="true">
  @csrf
  <input type="hidden" name="status" id="bulk-status-value" value="">
</form>

<form method="GET" action="{{ route('subscriber.index', ['account' => $account, 'scenario' => $scenario]) }}" class="reader-filter">
  <input type="text" name="q" class="form-control form-control-sm" placeholder="名前・メール・電話・LINE IDで検索" value="{{ $keyword ?? '' }}">
  <select name="route" class="form-select form-select-sm" aria-label="登録経路で絞り込み">
    <option value="">全経路</option>
    <option value="public_form" {{ ($routeFilter ?? '') === 'public_form' ? 'selected' : '' }}>登録フォーム</option>
    <option value="line" {{ ($routeFilter ?? '') === 'line' ? 'selected' : '' }}>LINE</option>
    <option value="manual" {{ ($routeFilter ?? '') === 'manual' ? 'selected' : '' }}>手動追加</option>
    <option value="other" {{ ($routeFilter ?? '') === 'other' ? 'selected' : '' }}>その他</option>
  </select>
  <select name="status" class="form-select form-select-sm">
    <option value="">全ステータス</option>
    <option value="active" {{ ($status ?? '') === 'active' ? 'selected' : '' }}>有効</option>
    <option value="inactive" {{ ($status ?? '') === 'inactive' ? 'selected' : '' }}>停止</option>
  </select>
  <button type="submit" class="btn btn-sm btn-primary">絞り込み</button>
  <a href="{{ route('subscriber.index', ['account' => $account, 'scenario' => $scenario]) }}" class="btn btn-sm btn-outline-secondary">リセット</a>
</form>

<div class="card">
  <div class="card-body p-0 reader-table-wrap">
    @if($subscribers->isEmpty())
    <div class="text-center py-5 text-muted"><i class="bi bi-people" style="font-size:2.5rem;"></i><p class="mt-2 mb-1">読者がいません</p><p class="small mb-0">「読者を追加」から登録するか、今後つなぐ登録フォームからの取り込みをご利用ください。</p></div>
    @else
    <table class="table table-hover mb-0 reader-table">
      <thead>
        <tr>
          <th class="ps-2 pe-0"><input type="checkbox" class="form-check-input" id="reader-check-all" title="このページを全選択" aria-label="このページを全選択"></th>
          <th>名前</th>
          <th>メール</th>
          <th>登録経路</th>
          <th>LINE userId</th>
          <th>電話</th>
          <th>登録日</th>
          <th>ステータス</th>
          <th class="text-end pe-3">操作</th>
        </tr>
      </thead>
      <tbody>
        @foreach($subscribers as $sub)
        <tr>
          <td class="ps-2 pe-0">
            <input type="checkbox" class="form-check-input reader-row-check" form="bulk-status-form" name="subscriber_ids[]" value="{{ $sub->id }}" aria-label="選択 {{ $sub->email }}">
          </td>
          <td>{{ $sub->name ?: '（未設定）' }}</td>
          <td class="small">{{ $sub->email }}</td>
          <td class="small">
            <span class="badge bg-light text-dark border" title="{{ $sub->registration_route ?: '—' }}">{{ $sub->registrationRouteLabel() }}</span>
          </td>
          <td class="small text-muted font-monospace">{{ $sub->line_user_id ?: '—' }}</td>
          <td class="small">{{ $sub->phone ?: '—' }}</td>
          <td class="small text-muted">{{ $sub->registered_at ? $sub->registered_at->format('Y/m/d') : '—' }}</td>
          <td><span class="badge {{ $sub->status === 'active' ? 'bg-success' : 'bg-secondary' }}">{{ $sub->status === 'active' ? '有効' : '停止' }}</span></td>
          <td class="text-end pe-3">
            <form method="POST" action="{{ route('subscriber.destroy', ['account' => $account, 'scenario' => $scenario, 'subscriber' => $sub]) }}" class="d-inline" onsubmit="return confirm('この読者を削除しますか？');">
              @csrf
              @method('DELETE')
              <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
            </form>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
    <div class="p-3 border-top">{{ $subscribers->links() }}</div>
    @endif
  </div>
</div>

{{-- 読者追加モーダル --}}
<div class="modal fade" id="modal-add-subscriber" tabindex="-1" aria-labelledby="modal-add-subscriber-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ route('subscriber.store', ['account' => $account, 'scenario' => $scenario]) }}">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="modal-add-subscriber-label">読者を追加</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="modal-body">
          <p class="small text-muted">このシナリオにのみ追加されます。同一シナリオ内でメールアドレスは重複できません。@if(config('putage.registration_email_dns_validation', true))メールは形式に加え、<strong>ドメインがメール受信可能か（MX 等）</strong>を DNS で確認します（実在までは判定しません）。@endif</p>
          <div class="mb-3">
            <label class="form-label fw-semibold">メールアドレス <span class="text-danger">*</span></label>
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required autocomplete="email" placeholder="example@domain.jp">
            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">名前</label>
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" autocomplete="name" placeholder="任意">
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">電話番号</label>
            <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" autocomplete="tel" placeholder="任意">
            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-0">
            <label class="form-label fw-semibold">LINE userId</label>
            <input type="text" name="line_user_id" class="form-control @error('line_user_id') is-invalid @enderror" value="{{ old('line_user_id') }}" placeholder="任意（U で始まる ID など）">
            @error('line_user_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-primary">追加する</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
@if($errors->any())
<script>
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById('modal-add-subscriber');
  if (el && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
    bootstrap.Modal.getOrCreateInstance(el).show();
  }
});
</script>
@endif
<script>
(function () {
  var bulkForm = document.getElementById('bulk-status-form');
  var statusInput = document.getElementById('bulk-status-value');
  var checkAll = document.getElementById('reader-check-all');
  var rowChecks = function () { return document.querySelectorAll('.reader-row-check'); };

  function anyChecked() {
    return Array.prototype.some.call(rowChecks(), function (c) { return c.checked; });
  }

  function submitBulk(status) {
    if (!bulkForm || !statusInput) return;
    if (!anyChecked()) {
      alert('読者を1名以上選択してください。');
      return;
    }
    statusInput.value = status;
    bulkForm.submit();
  }

  var btnA = document.getElementById('btn-bulk-active');
  var btnI = document.getElementById('btn-bulk-inactive');
  if (btnA) btnA.addEventListener('click', function () { submitBulk('active'); });
  if (btnI) btnI.addEventListener('click', function () { submitBulk('inactive'); });

  if (checkAll) {
    checkAll.addEventListener('change', function () {
      rowChecks().forEach(function (c) { c.checked = checkAll.checked; });
    });
  }
})();
</script>
@endpush