@extends('admin.layouts.app')

@section('title', 'Payment History')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<!-- Page header -->
        <div class="sr-page-header d-flex align-items-center justify-content-between flex-wrap">
          <div>
            <h2 class="sr-title">Payment History</h2>
            <p class="sr-sub">Complete transaction history</p>
          </div>
        </div>

        <!-- Toolbar: search + filter + export -->
        <div class="ph-toolbar">
          <div class="ph-search-wrap">
            <svg class="ph-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" class="ph-search-input" placeholder="Search...">
          </div>
          <button class="li-btn-outline">Filter by Date</button>
          <button class="li-btn-outline">Export</button>
        </div>

        <!-- Transactions -->
        <div class="li-panel last">
          <div class="ph-filter-tabs">
            <button class="ph-filter-tab active">All</button>
            <button class="ph-filter-tab">Completed</button>
            <button class="ph-filter-tab">Pending</button>
            <button class="ph-filter-tab">Failed</button>
          </div>

          <div class="ph-tx-list">
            <div class="ph-tx-row">
              <div class="ph-tx-icon ph-tx-icon--plus">+</div>
              <div class="ph-tx-info">
                <div class="ph-tx-title">Settlement Payout</div>
                <div class="ph-tx-sub">PAY-2024-001 &bull; Apr 15, 2026 14:30</div>
              </div>
              <div class="ph-tx-method">Bank Transfer</div>
              <div class="ph-tx-amount ph-amount-pos">$12,450.00</div>
              <div class="li-status-badge li-status-success">Completed</div>
              <a href="#" class="ph-view-link">View</a>
            </div>
            <div class="ph-tx-row">
              <div class="ph-tx-icon ph-tx-icon--minus">&minus;</div>
              <div class="ph-tx-info">
                <div class="ph-tx-title">Refund Processed</div>
                <div class="ph-tx-sub">PAY-2024-002 &bull; Apr 14, 2026 09:15</div>
              </div>
              <div class="ph-tx-method">Original Payment</div>
              <div class="ph-tx-amount ph-amount-neg">-$89.99</div>
              <div class="li-status-badge li-status-success">Completed</div>
              <a href="#" class="ph-view-link">View</a>
            </div>
            <div class="ph-tx-row">
              <div class="ph-tx-icon ph-tx-icon--minus">&minus;</div>
              <div class="ph-tx-info">
                <div class="ph-tx-title">Commission Deducted</div>
                <div class="ph-tx-sub">PAY-2024-003 &bull; Apr 12, 2026 16:45</div>
              </div>
              <div class="ph-tx-method">Platform Fee</div>
              <div class="ph-tx-amount ph-amount-neg">-$245.00</div>
              <div class="li-status-badge li-status-success">Completed</div>
              <a href="#" class="ph-view-link">View</a>
            </div>
            <div class="ph-tx-row">
              <div class="ph-tx-icon ph-tx-icon--plus">+</div>
              <div class="ph-tx-info">
                <div class="ph-tx-title">Product Sale</div>
                <div class="ph-tx-sub">PAY-2024-004 &bull; Apr 10, 2026 11:20</div>
              </div>
              <div class="ph-tx-method">Credit Card</div>
              <div class="ph-tx-amount ph-amount-pos">$1,234.50</div>
              <div class="li-status-badge li-status-pending">Pending</div>
              <a href="#" class="ph-view-link">View</a>
            </div>
            <div class="ph-tx-row">
              <div class="ph-tx-icon ph-tx-icon--plus">+</div>
              <div class="ph-tx-info">
                <div class="ph-tx-title">Settlement Payout</div>
                <div class="ph-tx-sub">PAY-2024-005 &bull; Apr 08, 2026 08:30</div>
              </div>
              <div class="ph-tx-method">Bank Transfer</div>
              <div class="ph-tx-amount ph-amount-pos">$11,230.00</div>
              <div class="li-status-badge li-status-success">Completed</div>
              <a href="#" class="ph-view-link">View</a>
            </div>
          </div>

          <div class="pagination-section">
            <div class="pagination-info">
              <span>Showing 1-5 of 248 transactions</span>
            </div>
            <div class="pagination">
              <button class="pagination-btn" id="prevBtn">&larr; Previous</button>
              <button class="pagination-btn active" data-page="1">1</button>
              <button class="pagination-btn" data-page="2">2</button>
              <button class="pagination-btn" data-page="3">3</button>
              <button class="pagination-btn" id="nextBtn">Next &rarr;</button>
            </div>
          </div>
        </div>
</main>
@endsection

@section('script')
<script>
document.querySelectorAll('.ph-filter-tab').forEach(function (tab) {
      tab.addEventListener('click', function () {
        document.querySelectorAll('.ph-filter-tab').forEach(function (t) { t.classList.remove('active'); });
        tab.classList.add('active');
      });
    });
</script>
@endsection