@extends('layouts.setup')
@section('title', '決済連携')
@section('page-title', '決済連携')

@push('styles')
<style>
  .payment-gateway-row--telecom { cursor: pointer; }
  .payment-gateway-row--telecom:hover { background-color: rgba(0, 0, 0, 0.02); }
</style>
@endpush

@section('setup_body')
{{-- フラッシュは layouts.app が全画面共通で表示する（二重表示防止）。 --}}
<div class="alert alert-light border small mb-3">
  クレジットカード決済を使うための、決済会社（テレコム・UnivaPay）との接続情報を登録します。登録した行をクリックすると、決済会社側に入力する情報（送信元IP・通知先URLなど）が表示されます。
</div>

<div class="setup-form-card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span>決済連携一覧</span>
    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
      <i class="bi bi-plus-lg me-1"></i>決済連携を追加
    </button>
  </div>
  <div class="card-body p-0">
    @if($accounts->isEmpty())
      <div class="text-center py-5 px-3">
        <i class="bi bi-credit-card-2-front" style="font-size:3rem;color:#ddd;"></i>
        <p class="mt-3 text-muted mb-0">決済連携が登録されていません</p>
      </div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>管理名</th>
              <th>決済代行</th>
              <th>モード</th>
              <th>状態</th>
              <th>設定</th>
              <th class="text-end">操作</th>
            </tr>
          </thead>
          <tbody id="paymentGatewayTableBody">
            @foreach($accounts as $account)
              @php
                $collapseId = 'paymentTelecomCollapse'.$account->id;
                $expandRow = $account->isTelecom() && (int) request('open') === (int) $account->id;
              @endphp
              @if($account->isTelecom())
                <tr
                  class="payment-gateway-row payment-gateway-row--telecom"
                  id="payment-gateway-row-{{ $account->id }}"
                  role="button"
                  tabindex="0"
                  aria-controls="{{ $collapseId }}"
                  aria-expanded="{{ $expandRow ? 'true' : 'false' }}"
                  data-bs-toggle="collapse"
                  data-bs-target="#{{ $collapseId }}"
                >
                  <td>
                    <div class="fw-semibold">{{ $account->name }}</div>
                    @if($account->merchant_id)
                      <div class="text-muted small">{{ $account->merchantIdLabel() }}: {{ $account->merchant_id }}</div>
                    @endif
                    <span class="small text-muted d-block mt-1">クリックでテレコム登録値を表示</span>
                  </td>
                  <td>{{ $account->providerLabel() }}</td>
                  <td><span class="badge bg-light text-dark">{{ $account->environmentLabelForList() }}</span></td>
                  <td><span class="badge {{ $account->status === 'active' ? 'bg-success' : 'bg-secondary' }}">{{ $account->status === 'active' ? '有効' : '無効' }}</span></td>
                  <td>
                    @if($account->isConfigured())
                      <span class="badge bg-success">入力済み</span>
                    @else
                      <span class="badge bg-warning text-dark">要確認</span>
                    @endif
                  </td>
                  <td class="text-end">
                    <button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="modal" data-bs-target="#editPayment{{ $account->id }}" data-no-row-toggle="1">編集</button>
                    <form method="POST" action="{{ route('setting.payment.destroy', $account) }}" class="d-inline" onsubmit="return confirm('この決済連携を削除しますか？商品プラン側の紐づきは未設定に戻ります。')">
                      @csrf @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger" data-no-row-toggle="1">削除</button>
                    </form>
                  </td>
                </tr>
                <tr class="collapse{{ $expandRow ? ' show' : '' }}" id="{{ $collapseId }}" data-bs-parent="#paymentGatewayTableBody">
                  <td colspan="6" class="bg-light p-0">
                    <div class="p-3">
                      @include('setting.partials.telecom-registration-fields', ['account' => $account, 'embedded' => true])
                      <p class="small text-muted mb-0 mt-2">クライアントIPの変更は上の行の<strong>編集</strong>から行えます。</p>
                    </div>
                  </td>
                </tr>
              @else
                <tr>
                  <td>
                    <div class="fw-semibold">{{ $account->name }}</div>
                    @if($account->merchant_id)
                      <div class="text-muted small">{{ $account->merchantIdLabel() }}: {{ $account->merchant_id }}</div>
                    @endif
                  </td>
                  <td>{{ $account->providerLabel() }}</td>
                  <td><span class="badge bg-light text-dark">{{ $account->environmentLabelForList() }}</span></td>
                  <td><span class="badge {{ $account->status === 'active' ? 'bg-success' : 'bg-secondary' }}">{{ $account->status === 'active' ? '有効' : '無効' }}</span></td>
                  <td>
                    @if($account->isConfigured())
                      <span class="badge bg-success">入力済み</span>
                    @else
                      <span class="badge bg-warning text-dark">要確認</span>
                    @endif
                  </td>
                  <td class="text-end">
                    <button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="modal" data-bs-target="#editPayment{{ $account->id }}">編集</button>
                    <form method="POST" action="{{ route('setting.payment.destroy', $account) }}" class="d-inline" onsubmit="return confirm('この決済連携を削除しますか？商品プラン側の紐づきは未設定に戻ります。')">
                      @csrf @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
                    </form>
                  </td>
                </tr>
              @endif
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>
</div>

<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">決済連携を追加</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <form method="POST" action="{{ route('setting.payment.store') }}">
      @csrf
      <div class="modal-body">
        @include('setting.partials.payment-form-fields', ['account' => null, 'providerLabels' => $providerLabels])
      </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>

@foreach($accounts as $account)
  <div class="modal fade" id="editPayment{{ $account->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg"><div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">決済連携を編集</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form method="POST" action="{{ route('setting.payment.update', $account) }}">
        @csrf @method('PUT')
        <div class="modal-body">
          @include('setting.partials.payment-form-fields', ['account' => $account, 'providerLabels' => $providerLabels])
        </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>
@endforeach

@if(request('open') && $accounts->contains('id', (int) request('open')))
  @push('scripts')
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var id = @json((int) request('open'));
        var modalEl = document.getElementById('editPayment' + id);
        if (modalEl && window.bootstrap) {
          bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }
        var collapseEl = document.getElementById('paymentTelecomCollapse' + id);
        if (collapseEl && window.bootstrap) {
          bootstrap.Collapse.getOrCreateInstance(collapseEl).show();
        }
        var row = document.getElementById('payment-gateway-row-' + id);
        if (row) {
          row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
      });
    </script>
  @endpush
@endif

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('[data-no-row-toggle]').forEach(function (el) {
        el.addEventListener('click', function (e) { e.stopPropagation(); });
      });
      document.querySelectorAll('.payment-gateway-row--telecom').forEach(function (row) {
        row.addEventListener('keydown', function (e) {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            row.click();
          }
        });
      });
    });
  </script>
@endpush
@endsection