@extends('vendor.layouts.app')

@section('title', 'Completed Settlements')

@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">Completed Settlements</h2>
            <p class="sr-sub">View all successful payouts</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</button>
          <button class="li-btn-outline">Download Report</button>
        </div>

        <!-- Settlements -->
        <div class="li-panel last">
          <div class="cs-list">
            <div class="cs-row">
              <div class="cs-row-top">
                <div class="cs-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#008236" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div class="cs-info">
                  <div class="cs-date">Apr 15, 2026</div>
                  <div class="cs-period">Settlement Period: Apr 01-15</div>
                </div>
                <div class="cs-amount-wrap">
                  <div class="cs-amount">$12,450.00</div>
                  <div class="cs-orders">45 orders</div>
                </div>
              </div>
              <div class="cs-row-bottom">
                <div class="cs-txn">TXN-20260415-001 &bull; Bank ****4567</div>
                <div class="cs-actions">
                  <a href="#" class="cs-link">Download Invoice</a>
                  <a href="#" class="cs-link">View Details</a>
                </div>
              </div>
            </div>

            <div class="cs-row">
              <div class="cs-row-top">
                <div class="cs-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#008236" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div class="cs-info">
                  <div class="cs-date">Apr 01, 2026</div>
                  <div class="cs-period">Settlement Period: Mar 16-31</div>
                </div>
                <div class="cs-amount-wrap">
                  <div class="cs-amount">$11,230.00</div>
                  <div class="cs-orders">38 orders</div>
                </div>
              </div>
              <div class="cs-row-bottom">
                <div class="cs-txn">TXN-20260401-001 &bull; Bank ****4567</div>
                <div class="cs-actions">
                  <a href="#" class="cs-link">Download Invoice</a>
                  <a href="#" class="cs-link">View Details</a>
                </div>
              </div>
            </div>

            <div class="cs-row">
              <div class="cs-row-top">
                <div class="cs-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#008236" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div class="cs-info">
                  <div class="cs-date">Mar 15, 2026</div>
                  <div class="cs-period">Settlement Period: Mar 01-15</div>
                </div>
                <div class="cs-amount-wrap">
                  <div class="cs-amount">$13,120.00</div>
                  <div class="cs-orders">52 orders</div>
                </div>
              </div>
              <div class="cs-row-bottom">
                <div class="cs-txn">TXN-20260315-001 &bull; Bank ****4567</div>
                <div class="cs-actions">
                  <a href="#" class="cs-link">Download Invoice</a>
                  <a href="#" class="cs-link">View Details</a>
                </div>
              </div>
            </div>

            <div class="cs-row">
              <div class="cs-row-top">
                <div class="cs-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#008236" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div class="cs-info">
                  <div class="cs-date">Mar 01, 2026</div>
                  <div class="cs-period">Settlement Period: Feb 16-29</div>
                </div>
                <div class="cs-amount-wrap">
                  <div class="cs-amount">$10,890.00</div>
                  <div class="cs-orders">41 orders</div>
                </div>
              </div>
              <div class="cs-row-bottom">
                <div class="cs-txn">TXN-20260301-001 &bull; Bank ****4567</div>
                <div class="cs-actions">
                  <a href="#" class="cs-link">Download Invoice</a>
                  <a href="#" class="cs-link">View Details</a>
                </div>
              </div>
            </div>

            <div class="cs-row">
              <div class="cs-row-top">
                <div class="cs-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#008236" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div class="cs-info">
                  <div class="cs-date">Feb 15, 2026</div>
                  <div class="cs-period">Settlement Period: Feb 01-15</div>
                </div>
                <div class="cs-amount-wrap">
                  <div class="cs-amount">$9,670.00</div>
                  <div class="cs-orders">35 orders</div>
                </div>
              </div>
              <div class="cs-row-bottom">
                <div class="cs-txn">TXN-20260215-001 &bull; Bank ****4567</div>
                <div class="cs-actions">
                  <a href="#" class="cs-link">Download Invoice</a>
                  <a href="#" class="cs-link">View Details</a>
                </div>
              </div>
            </div>
          </div>

          <div class="pagination-section">
            <div class="pagination-info">
              <span>Showing 1-5 of 68 settlements</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