@extends('layout.user')

@section('title','আমার পেমেন্ট')

@section('content')
{{-- Font Awesome --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  :root{
    --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --ring:#93c5fd;
    --c1:#2563eb; --c2:#7c3aed;
    --ok-bg:#ecfdf5; --ok-fg:#065f46;
    --warn-bg:#fff7ed; --warn-fg:#7c2d12;
    --bad-bg:#fee2e2; --bad-fg:#991b1b;
  }
  .wrap{max-width:1100px;margin:0 auto}
  .px1{padding-left:.25rem;padding-right:.25rem}
  @media (min-width:640px){ .px1{padding-left:.5rem;padding-right:.5rem} }
  .section{margin:12px 0}

  /* KPI row (same as admin) */
  .kpis{display:grid;gap:10px;grid-template-columns:1fr 1fr}
  @media(min-width:860px){.kpis{grid-template-columns:repeat(4,1fr)}}
  .kpi{
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 12px;
    display:flex;align-items:center;gap:12px;box-shadow:0 8px 18px rgba(2,6,23,.06)
  }
  .kpi-ico{
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px;
    background:linear-gradient(135deg,var(--c1),var(--c2))
  }
  .kpi .lbl{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:3px}
  .kpi .val{font-weight:900;color:var(--ink);font-size:18px}

  /* Cards */
  .card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
  .card-h{padding:10px 12px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--c1),var(--c2))}
  .card-b{padding:12px}

  /* Inputs / selects */
  .input{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 12px;font-size:14px;background:#fff;color:var(--ink)}
  .input:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px var(--ring)}
  .select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px}

  /* Buttons */
  .btn{border:0;border-radius:12px;padding:12px 14px;font-weight:900;cursor:pointer;transition:.15s;font-size:15px}
  .btn-ghost{background:#fff;border:1px solid var(--line)}
  .btn-blue{color:#fff;background:linear-gradient(90deg,var(--c1),var(--c2))}
  .btn-blue:active,.btn-ghost:active{transform:translateY(1px)}

  /* Toolbar (filters) — same breakpoints */
  .toolbar{display:grid;gap:8px;grid-template-columns:repeat(6,minmax(0,1fr))}
  @media(max-width:900px){.toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:520px){.toolbar{grid-template-columns:1fr}}
  .toolbar .input{padding:10px 12px}

  /* Scrollable table */
  .scroller{overflow:auto;border:1px solid var(--line);border-radius:14px}
  .tbl{width:max-content;min-width:920px}
  .tbl th,.tbl td{padding:12px;border-bottom:1px solid #eef2f7;white-space:nowrap}
  .tbl thead{position:sticky;top:0;background:#f8fafc;z-index:1}

  /* Status chips */
  .chip{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}
  .chip-ok{background:var(--ok-bg);color:var(--ok-fg)}
  .chip-warn{background:var(--warn-bg);color:var(--warn-fg)}
  .chip-bad{background:var(--bad-bg);color:var(--bad-fg)}

  .mini{font-size:12px;color:var(--muted);font-weight:700}
  .text-right{text-align:right}
</style>

<div class="wrap px1">

  {{-- KPI row --}}
  <div class="section kpis">
    <div class="kpi">
      <div class="kpi-ico"><i class="fa-solid fa-circle-check"></i></div>
      <div>
        <div class="lbl">মোট সম্পন্ন</div>
        <div class="val">৳ {{ number_format($summary['sum_completed'],2) }}</div>
      </div>
    </div>
    <div class="kpi">
      <div class="kpi-ico"><i class="fa-solid fa-clock-rotate-left"></i></div>
      <div>
        <div class="lbl">মোট অপেক্ষমাণ</div>
        <div class="val">৳ {{ number_format($summary['sum_pending'],2) }}</div>
      </div>
    </div>
    <div class="kpi">
      <div class="kpi-ico"><i class="fa-solid fa-triangle-exclamation"></i></div>
      <div>
        <div class="lbl">মোট ব্যর্থ</div>
        <div class="val">৳ {{ number_format($summary['sum_failed'],2) }}</div>
      </div>
    </div>
    <div class="kpi">
      <div class="kpi-ico"><i class="fa-solid fa-hashtag"></i></div>
      <div>
        <div class="lbl">মোট রেকর্ড</div>
        <div class="val">{{ number_format($summary['count']) }}</div>
      </div>
    </div>
  </div>

  {{-- Filters (same layout/controls look) --}}
  <div class="section card">
    <div class="card-h"><i class="fa-solid fa-filter"></i> ফিল্টার</div>
    <div class="card-b">
      <form method="GET" action="{{ route('user.payments') }}" class="toolbar">
        <input class="input" type="text" name="q" value="{{ $q }}" placeholder="সার্চ: ট্রানজেকশন আইডি / ট্র্যাকিং আইডি / পেমেন্ট মেথড">

        <select class="input select" name="status">
          <option value="">স্ট্যাটাস (সব)</option>
          <option value="completed" {{ $status==='completed'?'selected':'' }}>সম্পন্ন</option>
          <option value="pending"   {{ $status==='pending'?'selected':'' }}>অপেক্ষমাণ</option>
          <option value="failed"    {{ $status==='failed'?'selected':'' }}>ব্যর্থ</option>
          <option value="cancelled" {{ $status==='cancelled'?'selected':'' }}>বাতিল</option>
        </select>

        <select class="input select" name="method">
          <option value="">মেথড (সব)</option>
          @foreach($methods as $m)
            <option value="{{ $m }}" {{ $method===$m?'selected':'' }}>{{ $m }}</option>
          @endforeach
        </select>

        <input class="input" type="date" name="date_from" value="{{ $dateFrom }}">
        <input class="input" type="date" name="date_to" value="{{ $dateTo }}">

        <select class="input select" name="per_page" style="max-width:160px">
          @foreach([10,15,20,50,100] as $pp)
            <option value="{{ $pp }}" {{ (int)$perPage===$pp ? 'selected':'' }}>{{ $pp }}/পেজ</option>
          @endforeach
        </select>

        <div style="display:flex;gap:8px;align-items:center;grid-column:1 / -1;flex-wrap:wrap;margin-top:4px">
          <a class="btn btn-ghost" href="{{ route('user.payments.export', request()->query()) }}"><i class="fa-solid fa-file-arrow-down"></i>&nbsp;CSV ডাউনলোড</a>
          <button class="btn btn-ghost" type="submit"><i class="fa-solid fa-filter"></i>&nbsp;ফিল্টার</button>
          <a class="btn btn-blue" href="{{ route('user.payments') }}"><i class="fa-solid fa-rotate-left"></i>&nbsp;রিসেট</a>
        </div>
      </form>
    </div>
  </div>

  {{-- Records table (same table skin) --}}
  <div class="section card">
    <div class="card-h"><i class="fa-solid fa-list"></i> পেমেন্ট রেকর্ড</div>
    <div class="card-b">
      <div class="scroller">
        <table class="tbl">
          <thead>
            <tr>
              <th>#</th>
              <th>ট্রানজেকশন আইডি</th>
              <th>ট্র্যাকিং আইডি</th>
              <th>মেথড</th>
              <th class="text-right">পরিমাণ</th>
              <th>স্ট্যাটাস</th>
              <th>তারিখ</th>
            </tr>
          </thead>
          <tbody>
            @forelse($payments as $i => $p)
              <tr>
                <td>{{ $payments->firstItem() + $i }}</td>
                <td><code>{{ $p->transaction_id }}</code></td>
                <td><code>{{ $p->display_trx_id ?? '—' }}</code></td>
                <td>{{ $p->display_method ?? '—' }}</td>
                <td class="text-right">৳ {{ number_format($p->amount,2) }}</td>
                <td>
                  @php
                    $cls='chip chip-warn';
                    if($p->status==='completed') $cls='chip chip-ok';
                    elseif(in_array($p->status,['failed','cancelled'])) $cls='chip chip-bad';
                  @endphp
                  <span class="{{ $cls }}">
                    {{ $p->status === 'completed' ? 'সম্পন্ন' : ($p->status === 'pending' ? 'অপেক্ষমাণ' : ($p->status === 'failed' ? 'ব্যর্থ' : ($p->status === 'cancelled' ? 'বাতিল' : $p->status))) }}
                  </span>
                </td>
                <td>{{ \Illuminate\Support\Carbon::parse($p->created_at)->format('Y-m-d H:i') }}</td>
              </tr>
            @empty
              <tr><td colspan="7" style="text-align:center;color:var(--muted);padding:20px">কোনো রেকর্ড পাওয়া যায়নি।</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div style="margin-top:10px">
        {{ $payments->withQueryString()->links() }}
      </div>
    </div>
  </div>

</div>
@endsection
