@extends('portal._layouts.default')

@section('MainContent')
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-12">
      <!-- Header -->
      <div class="header">
        <div class="header-body">
          <div class="row align-items-center">
            <div class="col">
              <h6 class="header-pretitle">Payment Detail</h6>
              <h1 class="header-title">
                #{{ $payment->order_no }}
                <small class="text-muted text-uppercase">{{ $payment->status }}</small>
              </h1>
            </div>

            <div class="col-auto">
              @if (request()->header('referer'))
                <a href="{{ route('payments.index') }}" class="btn btn-primary lift"><i class="fe fe-arrow-left me-2"></i>Back</a>
              @else
                <a href="{{ route('payments.index') }}" class="btn btn-primary lift">All payments</a>
              @endif
            </div>
          </div>
        </div>
      </div>

      <div class="">
        <div class="row">
          <div class="col-lg-6 col-xl-6">
            <div class="card">
              <div class="card-body">
                <!-- Header -->
                <div class="row align-items-center mb-4">
                  <div class="col">
                    <!-- Title -->
                    <h4 class="mb-2">
                      <a>#{{ $payment->order_no }}</a>
                    </h4>

                    <p class="small">
                      @if ($payment->order_description)
                        {{ $payment->order_description }}
                      @else
                        <span class="text-muted">No order description</span>
                      @endif
                    </p>

                    <p class="small text-body-secondary mb-0">
                      @if (today()->subDays(7)->lte($payment->updated_at))
                        <span title="{{ $payment->updated_at }}">Updated {{ $payment->updated_at->diffForHumans() }}</span>
                      @else
                        <span title="{{ $payment->updated_at->diffForHumans() }}">Updated {{ $payment->updated_at }}</span>
                      @endif
                    </p>
                  </div>

                  <div class="col-auto">
                    <!-- Dropdown -->
                    <div class="dropdown">
                      <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fe fe-more-vertical"></i>
                      </a>
                      <div class="dropdown-menu dropdown-menu-end d-none">
                        <a href="#!" class="dropdown-item">
                          Action
                        </a>
                        <a href="#!" class="dropdown-item">
                          Another action
                        </a>
                        <a href="#!" class="dropdown-item">
                          Something else here
                        </a>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Stats -->
                <div class="row g-0 border-top border-bottom">
                  <div class="col-6 py-4 text-center">
                    <h6 class="text-uppercase text-body-secondary">Order Amount</h6>
                    <h2 class="mb-0">{{ $payment->order_amount }} {{ $payment->order_currency }}</h2>
                  </div>
                  <div class="col-6 py-4 text-center border-start">
                    <h6 class="text-uppercase text-body-secondary">Total Paid Amount</h6>
                    <h2 class="mb-0">{{ $payment->total_paid_amount }} {{ $payment->order_currency }}</h2>
                  </div>
                  <div class="col-6 py-4 text-center">
                    <h6 class="text-uppercase text-body-secondary">Payer Due Amount</h6>
                    <h2 class="mb-0">{{ $payment->payer_due_amount }} {{ $payment->payer_paid_currency }}</h2>
                  </div>
                  <div class="col-6 py-4 text-center border-start">
                    <h6 class="text-uppercase text-body-secondary">Payer Paid Amount</h6>
                    <h2 class="mb-0">{{ $payment->payer_paid_amount }} {{ $payment->payer_paid_currency }}</h2>
                  </div>
                </div>

                <!-- List group -->
                <div class="list-group list-group-flush mb-4">
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><span>Status</span></div>
                      <div class="col-auto"><span>{{ $payment->status_text }}</span></div>
                    </div>
                  </div>
                </div>

                <!-- Footer -->
                <div class="row align-items-center">
                  <div class="col">
                    <div class="row align-items-center g-0">
                      <div class="col-auto"><div class="small me-2">{{ $payment->paid_ratio_percent }}%</div></div>
                      <div class="col">
                        <!-- Progress -->
                        <div class="progress progress-sm">
                          <div class="progress-bar" role="progressbar" style="width:{{ $payment->paid_ratio_percent }}%" aria-valuenow="{{ $payment->paid_ratio_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 支付详情 -->
            <div class="card">
              <div class="card-header">
                <h4 class="card-header-title">Payment Detail</h4>
              </div>

              <!-- Body -->
              <div class="card-body py-0">
                <div class="list-group list-group-flush">
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Order &numero;</small></div>
                      <div class="col-auto">
                        <small class="text-body-secondary">{{ $payment->order_no ?: 'N/A' }}</small>
                      </div>
                    </div>
                  </div>

                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Request ID</small></div>
                      <div class="col-auto">
                        <small class="text-body-secondary">{{ $payment->request_id ?: 'N/A' }}</small>
                      </div>
                    </div>
                  </div>

                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>ID</small></div>
                      <div class="col-auto">
                        <small class="text-body-secondary">{{ $payment->id }}</small>
                      </div>
                    </div>
                  </div>

                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Reference</small></div>
                      <div class="col-auto">
                        <small class="text-body-secondary">{{ $payment->coinpal_reference ?: 'N/A' }}</small>
                      </div>
                    </div>
                  </div>

                  @if ($payment->order_reamrk)
                    <div class="list-group-item">
                      <div class="row align-items-center">
                        <div class="col"><small>Remark</small></div>
                        <div class="col-auto">
                          @foreach ($payment->order_remark as $key => $value)
                              <div class="row align-items-center">
                                <div class="col"><small class="text-body-secondary">{{ $key }}:</small></div>
                                <div class="col-auto"><small class="text-body-secondary">{{ $value }}</small></div>
                              </div>
                          @endforeach

                        </div>
                      </div>
                    </div>
                  @endif

                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Created At</small></div>
                      <div class="col-auto">
                        <time class="small text-body-secondary" datetime="{{ $payment->created_at }}">{{ $payment->created_at }}</time>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Updated At</small></div>
                      <div class="col-auto">
                        <time class="small text-body-secondary" datetime="{{ $payment->updated_at }}">{{ $payment->updated_at }}</time>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 调试信息 -->
            <div class="card {{ Auth::user()?->is_admin ? '' : 'd-none' }}">
              <div class="card-header">
                <h4 class="card-header-title">Debug Info</h4>
              </div>

              <!-- Body -->
              <div class="card-body py-0">
                <div class="list-group list-group-flush">
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Cashier URL</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->coinpal_cashier_url ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Merchant Notify URL</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->merchant_notify_url ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Payment Redirect URL</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->redirect_url ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Payment Success URL</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->success_url ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Payment Cancel URL</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->cancel_url ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="col-lg-6 col-xl-6">
            <!-- 支付人信息 -->
            <div class="card">
              <div class="card-header">
                <div class="row align-items-center">
                  <div class="col">
                    <h4 class="card-header-title">Payer Info</h4>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-link" target="_blank" href="{{ route('payments.checkout', $payment) }}">
                      Goto Checkout <i class="fe fe-external-link"></i>
                    </a>
                  </div>
                </div>
              </div>

              <!-- Body -->
              <div class="card-body py-0">
                <div class="list-group list-group-flush">
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Payer Email</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->payer_email ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Payer IP</small></div>
                      <div class="col-auto"><small class="text-body-secondary">{{ $payment->payer_ip ?: 'N/A' }}</small></div>
                    </div>
                  </div>
                  <div class="list-group-item">
                    <div class="row align-items-center">
                      <div class="col"><small>Cashier URL</small></div>
                      <div class="col-auto"><small class="text-body-secondary">
                        <a>{{ route('payments.checkout', $payment) }}</a>
                      </small></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- CardStart: 支付记录卡片 -->
            <div class="card">
              <div class="card-header">
                <h4 class="card-header-title">Payment History</h4>
              </div>

              <div class="card-body">
                @if (! $payment->notifyRecords->count())
                  <p class="text-muted">There is currently no records</p>
                @endif

                <div class="list-group list-group-flush list-group-activity my-n3">
                  @foreach ($payment->notifyRecords as $record)
                    <div class="list-group-item">
                      <div class="row">
                        <div class="col-auto">
                          <div class="avatar avatar-sm">
                            <div class="avatar-title fs-lg bg-primary-subtle rounded-circle text-primary"><i class="fe fe-mail"></i></div>
                          </div>
                        </div>

                        <div class="col ms-n2">
                          <div class="row mb-1">
                            <div class="col">
                              <span class="text-uppercase">{{ $record->status }}</span>
                              @if ((float) $record->paid_amount)
                                <small class="small text-muted ms-3">{{ $record->paid_amount }} {{ $record->paid_currency }}</small>
                              @endif
                            </div>
                            <div class="col-auto">
                              @if ($record->unresolved_label)
                                <span class="badge rounded-pill text-bg-danger-subtle me-2">{{ $record->unresolved_label }}</span>
                              @endif
                            </div>
                          </div>

                          <div class="row">
                            <div class="col">
                              <small class="text-body-secondary">{{ $record->created_at->diffForHumans() }}</small>
                            </div>
                            <div class="col-auto">
                              <small class="text-body-secondary">{{ $record->created_at }}</small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
              </div>
            </div> <!-- CardEnd: 交付记录卡片 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection