@extends('layouts.partner-portal')
@section('title', 'パートナーマイページ')
@section('content')

@include('partner-portal.partials._summary')

<div class="pp-card mb-4">
  <div class="card-header">紹介URL</div>
  <div class="card-body p-0">
    @if($links->isEmpty())
    <div class="pp-empty">
      <i class="bi bi-link-45deg"></i>
      <p class="small mb-0 mt-2">紹介URLがまだ発行されていません。担当者にお問い合わせください。</p>
    </div>
    @else
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th class="ps-3">案件</th>
            <th>紹介URL</th>
            <th class="text-end pe-3">クリック</th>
          </tr>
        </thead>
        <tbody>
          @foreach($links as $link)
          <tr>
            <td class="ps-3">
              {{ $link->campaign->name ?? '（終了した案件）' }}
              @if($link->campaign)
              <div class="text-muted" style="font-size:.75rem">報酬: {{ $link->campaign->commissionLabel() }} ／ {{ $link->campaign->typeLabel() }}</div>
              @endif
            </td>
            <td>
              <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="pp-url">{{ $link->publicUrl() }}</span>
                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2 pp-copy"
                        data-copy-text="{{ $link->publicUrl() }}" title="URLをコピー">
                  <i class="bi bi-clipboard"></i>
                </button>
              </div>
            </td>
            <td class="text-end pe-3">{{ number_format((int) $link->click_count) }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    @endif
  </div>
</div>

<div class="pp-card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>最近の成果</span>
    <a href="{{ route('public.partner.portal.conversions') }}" class="small">すべて見る</a>
  </div>
  <div class="card-body p-0">
    @if($recentConversions->isEmpty())
    <div class="pp-empty">
      <i class="bi bi-graph-up"></i>
      <p class="small mb-0 mt-2">まだ成果がありません。紹介URLを使って案内してみましょう。</p>
    </div>
    @else
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th class="ps-3">発生日</th>
            <th>案件</th>
            <th class="text-end">報酬</th>
            <th class="pe-3">状態</th>
          </tr>
        </thead>
        <tbody>
          @foreach($recentConversions as $conversion)
          <tr>
            <td class="ps-3 small text-muted">{{ $conversion->occurred_at ? $conversion->occurred_at->format('Y/m/d') : '—' }}</td>
            <td>{{ $conversion->campaign->name ?? '—' }}</td>
            <td class="text-end">{{ number_format((int) $conversion->reward_amount) }}円</td>
            <td class="pe-3"><span class="badge {{ $conversion->statusBadgeClass() }}">{{ $conversion->statusLabel() }}</span></td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    @endif
  </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.pp-copy').forEach(function (btn) {
  btn.addEventListener('click', async function () {
    var text = btn.getAttribute('data-copy-text') || '';
    try {
      await navigator.clipboard.writeText(text);
      var prev = btn.innerHTML;
      btn.innerHTML = '<i class="bi bi-check2"></i>';
      setTimeout(function () { btn.innerHTML = prev; }, 1200);
    } catch (e) {
      window.prompt('コピー用URL', text);
    }
  });
});
</script>
@endpush
@endsection