@php
  $ext = $extended;
  $cards = [
    ['prefix' => 'line_message', 'title' => 'LINE メッセージ通知設定', 'sub' => null],
    ['prefix' => 'line_upper_alert', 'title' => 'LINE 上限アラート通知設定', 'sub' => '（午前7時頃通知）'],
    ['prefix' => 'line_account_ban', 'title' => 'LINE アカウントBAN通知設定', 'sub' => null],
  ];
@endphp

@push('styles')
<style>
  .line-notify-cred-block { border-top: 1px dashed #e3e7ef; margin-top: 0.75rem; padding-top: 0.75rem; }
</style>
@endpush

<div class="card scenario-ws-card mb-3">
  <div class="card-body">
    <h2 class="h5 mb-2">LINE通知設定</h2>
    <p class="text-muted small mb-3">通知先を選ぶと、下に連携情報入力欄が出ます。<strong>LINEアカウントBAN通知</strong>は、停止（Suspend）を検知したときに自動送信します（5分ごとの API 確認・Messaging API エラー・モジュール Webhook の <code>botSuspended</code>）。メッセージ通知・上限アラートは保存のみ（送信処理は後続）。</p>

    @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

    <form method="post" action="{{ route('scenario.workspace.line-notifications.update', [$account, $scenario]) }}" class="d-grid gap-3">
      @csrf
      @method('PUT')

      @foreach($cards as $card)
        @php
          $p = $card['prefix'];
          $destField = $p.'_notify_destination';
          $destValue = old($destField, $ext?->{$destField} ?? 'none');
          if ($destValue === 'line') {
            $destValue = 'none';
          }
          $configField = $p.'_notify_config';
          $config = old($configField, $ext?->{$configField});
          $cfg = is_array($config) ? $config : [];
        @endphp
        <div class="card border shadow-sm">
          <div class="card-header bg-white fw-semibold">
            {{ $card['title'] }}
            @if($card['sub']) <span class="text-muted small">{{ $card['sub'] }}</span> @endif
          </div>
          <div class="card-body">
            <div class="row g-2 align-items-center">
              <label class="col-12 col-md-3 col-form-label">通知先</label>
              <div class="col-12 col-md-5">
                <select
                  name="{{ $destField }}"
                  class="form-select form-select-sm js-line-notify-destination @error($destField) is-invalid @enderror"
                  data-prefix="{{ $p }}"
                >
                  <option value="none" {{ $destValue === 'none' ? 'selected' : '' }}>通知しない</option>
                  <option value="chatwork" {{ $destValue === 'chatwork' ? 'selected' : '' }}>Chatwork</option>
                  <option value="slack" {{ $destValue === 'slack' ? 'selected' : '' }}>Slack</option>
                  <option value="discord" {{ $destValue === 'discord' ? 'selected' : '' }}>Discord</option>
                </select>
                @error($destField)<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
            </div>

            <div class="line-notify-cred-block js-line-notify-config js-line-notify-chatwork" data-prefix="{{ $p }}">
              <div class="row g-2">
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">APIトークン</label>
                  <input type="text" class="form-control form-control-sm @error($p.'_chatwork_api_token') is-invalid @enderror" name="{{ $p }}_chatwork_api_token" value="{{ old($p.'_chatwork_api_token', (string) ($cfg['chatwork_api_token'] ?? '')) }}" maxlength="2000">
                  @error($p.'_chatwork_api_token')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">通知先ルームID</label>
                  <input type="text" class="form-control form-control-sm @error($p.'_chatwork_room_id') is-invalid @enderror" name="{{ $p }}_chatwork_room_id" value="{{ old($p.'_chatwork_room_id', (string) ($cfg['chatwork_room_id'] ?? '')) }}" maxlength="191" placeholder="例: rid12345678">
                  @error($p.'_chatwork_room_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
            </div>

            <div class="line-notify-cred-block js-line-notify-config js-line-notify-slack" data-prefix="{{ $p }}">
              <div class="row g-2">
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">Bot User OAuth Token</label>
                  <input type="text" class="form-control form-control-sm @error($p.'_slack_bot_token') is-invalid @enderror" name="{{ $p }}_slack_bot_token" value="{{ old($p.'_slack_bot_token', (string) ($cfg['slack_bot_token'] ?? '')) }}" maxlength="2000">
                  @error($p.'_slack_bot_token')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">通知先チャンネル</label>
                  <input type="text" class="form-control form-control-sm @error($p.'_slack_channel') is-invalid @enderror" name="{{ $p }}_slack_channel" value="{{ old($p.'_slack_channel', (string) ($cfg['slack_channel'] ?? '')) }}" maxlength="191" placeholder="例: #line-notify">
                  @error($p.'_slack_channel')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
              </div>
            </div>

            <div class="line-notify-cred-block js-line-notify-config js-line-notify-discord" data-prefix="{{ $p }}">
              <label class="form-label small mb-1">ウェブフックURL</label>
              <input type="url" class="form-control form-control-sm @error($p.'_discord_webhook_url') is-invalid @enderror" name="{{ $p }}_discord_webhook_url" value="{{ old($p.'_discord_webhook_url', (string) ($cfg['discord_webhook_url'] ?? '')) }}" maxlength="2000" placeholder="https://discord.com/api/webhooks/...">
              @error($p.'_discord_webhook_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mt-3 js-line-notify-test-wrap" data-prefix="{{ $p }}">
              <button
                type="submit"
                class="btn btn-outline-secondary btn-sm"
                name="test_target"
                value="{{ $p }}"
                formaction="{{ route('scenario.workspace.line-notifications.test', [$account, $scenario]) }}"
              >テスト</button>
            </div>
          </div>
        </div>
      @endforeach

      <div>
        <button type="submit" class="btn btn-success btn-sm px-4">保存</button>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  function toggleConfig(prefix, destination) {
    ['chatwork', 'slack', 'discord'].forEach(function (provider) {
      document.querySelectorAll('.js-line-notify-' + provider + '[data-prefix="' + prefix + '"]').forEach(function (el) {
        el.classList.toggle('d-none', destination !== provider);
      });
    });
    document.querySelectorAll('.js-line-notify-test-wrap[data-prefix="' + prefix + '"]').forEach(function (el) {
      el.classList.toggle('d-none', destination === 'none');
    });
  }

  document.querySelectorAll('.js-line-notify-destination').forEach(function (select) {
    var prefix = select.getAttribute('data-prefix') || '';
    toggleConfig(prefix, select.value);
    select.addEventListener('change', function () {
      toggleConfig(prefix, select.value);
    });
  });
});
</script>
@endpush