@php
  $credentials = $account ? $account->normalizedCredentials() : [];
  $selectedProvider = old('provider', $account->provider ?? \App\Models\PaymentGatewayAccount::PROVIDER_TELECOM);
  $credentialPlaceholder = fn (string $key) => $account && filled($credentials[$key] ?? null)
      ? '登録済み（変更時のみ入力）'
      : '未登録';
@endphp
<div class="row g-3 payment-gateway-form" data-payment-gateway-form>
  <div class="col-md-6">
    <label class="form-label fw-semibold">管理名 <span class="text-danger">*</span></label>
    <input type="text" name="name" class="form-control" value="{{ old('name', $account->name ?? '') }}" placeholder="例：テレコム本番" required>
  </div>
  <div class="col-md-6">
    <label class="form-label fw-semibold">決済代行 <span class="text-danger">*</span></label>
    <select name="provider" class="form-select" required data-payment-provider-select>
      @foreach($providerLabels as $providerKey => $providerLabel)
        <option value="{{ $providerKey }}" @selected($selectedProvider === $providerKey)>{{ $providerLabel }}</option>
      @endforeach
    </select>
  </div>
  <div class="col-md-6">
    <label class="form-label fw-semibold">状態 <span class="text-danger">*</span></label>
    <select name="status" class="form-select" required>
      <option value="active" @selected(old('status', $account->status ?? 'active') === 'active')>有効</option>
      <option value="inactive" @selected(old('status', $account->status ?? 'active') === 'inactive')>無効</option>
    </select>
  </div>
  <input type="hidden" name="environment" value="{{ old('environment', $account->environment ?? 'live') }}">

  <div class="col-12 payment-provider-panel" data-provider-panel="{{ \App\Models\PaymentGatewayAccount::PROVIDER_TELECOM }}">
    <div class="border rounded p-3 bg-light">
      <div class="fw-semibold mb-2">テレコムクレジット</div>
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">クライアントIP <span class="text-danger">*</span></label>
          <input type="text" name="merchant_id" class="form-control" value="{{ old('merchant_id', $account->merchant_id ?? '') }}" placeholder="契約時に発行されたクライアントIP">
        </div>
      </div>
      @include('setting.partials.telecom-registration-fields', ['account' => $account])
    </div>
  </div>

  <div class="col-12 payment-provider-panel" data-provider-panel="{{ \App\Models\PaymentGatewayAccount::PROVIDER_UNIVAPAY_LEGACY }}">
    <div class="border rounded p-3 bg-light">
      <div class="fw-semibold mb-2">UnivaPay（旧システム）</div>
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">店舗ID <span class="text-danger">*</span></label>
          <input type="text" name="merchant_id" class="form-control" value="{{ old('merchant_id', $account->merchant_id ?? '') }}" placeholder="店舗画面の店舗ID（一般設定のIDではない）">
        </div>
      </div>
      <p class="form-text mb-0">テスト／本番の切替は UnivaPay 管理画面のシステムモードで行います。送信元IP・決済結果通知URL・自動課金停止通知URLの案内は、受信実装後に monaka 画面で表示する予定です。</p>
    </div>
  </div>

  <div class="col-12 payment-provider-panel" data-provider-panel="{{ \App\Models\PaymentGatewayAccount::PROVIDER_UNIVAPAY_NEW }}">
    <div class="border rounded p-3 bg-light">
      <div class="fw-semibold mb-2">UnivaPay（新システム）</div>
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">店舗ID <span class="text-danger">*</span></label>
          <input type="text" name="merchant_id" class="form-control" value="{{ old('merchant_id', $account->merchant_id ?? '') }}" placeholder="【店舗】の店舗ID">
          <div class="form-text">一般設定のIDではなく、店舗名の上に表示される店舗IDを入力してください。</div>
        </div>
        <div class="col-12"><hr class="my-1"></div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">本番モード・アプリトークン <span class="text-danger">*</span></label>
          <input type="password" name="live_app_token" class="form-control" autocomplete="new-password" placeholder="{{ $credentialPlaceholder(\App\Models\PaymentGatewayAccount::CRED_LIVE_APP_TOKEN) }}">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">本番モード・シークレット <span class="text-danger">*</span></label>
          <input type="password" name="live_secret" class="form-control" autocomplete="new-password" placeholder="{{ $credentialPlaceholder(\App\Models\PaymentGatewayAccount::CRED_LIVE_SECRET) }}">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">テストモード・アプリトークン <span class="text-danger">*</span></label>
          <input type="password" name="test_app_token" class="form-control" autocomplete="new-password" placeholder="{{ $credentialPlaceholder(\App\Models\PaymentGatewayAccount::CRED_TEST_APP_TOKEN) }}">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">テストモード・シークレット <span class="text-danger">*</span></label>
          <input type="password" name="test_secret" class="form-control" autocomplete="new-password" placeholder="{{ $credentialPlaceholder(\App\Models\PaymentGatewayAccount::CRED_TEST_SECRET) }}">
        </div>
      </div>
      <p class="form-text mb-0">本番・テストそれぞれのアプリトークンとシークレットを保存します（UTAGE と同様、両方の登録が必要です）。ウェブフックURLの表示・UnivaPay への登録案内は受信実装後に追加します。</p>
    </div>
  </div>

  <div class="col-12">
    <label class="form-label fw-semibold">メモ</label>
    <textarea name="memo" class="form-control" rows="3" placeholder="管理用メモ。契約名や利用範囲など">{{ old('memo', $account->memo ?? '') }}</textarea>
  </div>
  <div class="col-12">
    <div class="form-text">秘密情報は画面に再表示しません。編集時に空欄のまま保存すると既存値を維持します。</div>
  </div>
</div>

@once
  @push('scripts')
    <script>
      (function () {
        function syncPaymentProviderPanels(root) {
          const select = root.querySelector('[data-payment-provider-select]');
          if (!select) return;
          const provider = select.value;
          root.querySelectorAll('[data-provider-panel]').forEach(function (panel) {
            const active = panel.getAttribute('data-provider-panel') === provider;
            panel.classList.toggle('d-none', !active);
            panel.querySelectorAll('input, textarea, select').forEach(function (el) {
              if (el === select || el.name === 'name' || el.name === 'status' || el.name === 'memo' || el.name === 'environment') {
                return;
              }
              el.disabled = !active;
            });
          });
        }
        document.querySelectorAll('[data-payment-gateway-form]').forEach(function (form) {
          const select = form.querySelector('[data-payment-provider-select]');
          if (!select) return;
          select.addEventListener('change', function () { syncPaymentProviderPanels(form); });
          syncPaymentProviderPanels(form);
        });
      })();
    </script>
  @endpush
@endonce