@extends('layouts.marketplace', ['title' => 'Marketplace Account - Payouts'])

@section('content')
    <!-- Payouts content -->
    <div class="col-lg-9 pt-2 pt-xl-3">
        <!-- Page title -->
        <h1 class="h2 pb-3 mb-2 mb-md-3">Payouts</h1>
        <!-- Info alert -->
        <div class="alert alert-info mb-2 mb-sm-3 mb-md-4" role="alert">
            <div class="fw-semibold mb-2">Upcoming payout</div>
            <p class="fs-sm mb-0">Your current earnings of <span class="fw-semibold">$735.00</span> will be sent to
                you on September 2, 2024</p>
        </div>
        <!-- Payouts table -->
        <div class="table-responsive"
            data-filter-list='{"listClass": "payouts-list", "sortClass": "payouts-sort", "valueNames": ["amount", "date"]}'>
            <table class="table align-middle fs-sm">
                <thead>
                    <tr>
                        <th class="ps-0" scope="col">
                            <button class="btn fw-normal text-body payouts-sort p-0" data-sort="amount"
                                type="button">Amount</button>
                        </th>
                        <th scope="col">
                            <span class="fw-normal text-body">Payout method</span>
                        </th>
                        <th scope="col">
                            <button class="btn fw-normal text-body payouts-sort p-0" data-sort="date" type="button">Date
                                processed</button>
                        </th>
                        <th scope="col">
                            <span class="fw-normal text-body">Status</span>
                        </th>
                        <th class="pe-0" scope="col"></th>
                    </tr>
                </thead>
                <tbody class="payouts-list">
                    <tr>
                        <td class="fw-medium py-3 ps-0">$1,233.84<span class="amount visually-hidden">123384</span></td>
                        <td class="py-3">PayPal</td>
                        <td class="py-3">August 16, 2024<span class="date visually-hidden">1723838358</span>
                        </td>
                        <td class="py-3">
                            <span class="badge fs-xs text-info bg-info-subtle rounded-pill">In transit</span>
                        </td>
                        <td class="py-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium py-3 ps-0">$805.79<span class="amount visually-hidden">80579</span>
                        </td>
                        <td class="py-3">PayPal</td>
                        <td class="py-3">August 2, 2024<span class="date visually-hidden">1722628758</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium py-3 ps-0">$1,564.98<span class="amount visually-hidden">156498</span></td>
                        <td class="py-3">Payoneer</td>
                        <td class="py-3">July 16, 2024<span class="date visually-hidden">1721159958</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium py-3 ps-0">$942.50<span class="amount visually-hidden">94250</span>
                        </td>
                        <td class="py-3">PayPal</td>
                        <td class="py-3">July 2, 2024<span class="date visually-hidden">1719950358</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium py-3 ps-0">$1,759.35<span class="amount visually-hidden">175935</span></td>
                        <td class="py-3">Payoneer</td>
                        <td class="py-3">June 16, 2024<span class="date visually-hidden">1718567958</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium text-danger py-3 ps-0">$2,060.80<span
                                class="amount visually-hidden">206080</span></td>
                        <td class="py-3">Payoneer</td>
                        <td class="py-3">June 2, 2024<span class="date visually-hidden">1717358358</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-danger bg-danger-subtle rounded-pill">Returned</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium py-3 ps-0">$493.26<span class="amount visually-hidden">49326</span>
                        </td>
                        <td class="py-3">SWIFT</td>
                        <td class="py-3">May 16, 2024<span class="date visually-hidden">1715889558</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-medium py-3 ps-0">$654.75<span class="amount visually-hidden">65475</span>
                        </td>
                        <td class="py-3">SWIFT</td>
                        <td class="py-3">May 2, 2024<span class="date visually-hidden">1714679958</span></td>
                        <td class="py-3">
                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
                        </td>
                        <td class="fpy-3 pe-0">
                            <div class="nav justify-content-end">
                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
                                    href="#!">
                                    <i class="ci-file ms-n1 me-1"></i>
                                    <span class="fs-xs animate-target">Export to CVS</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        <div class="d-flex align-items-center justify-content-between pt-2 gap-3">
            <div class="fs-sm">Showing <span class="fw-semibold">8</span> of <span class="fw-semibold">30</span><span
                    class="d-none d-sm-inline"> results</span></div>
            <nav aria-label="Pagination">
                <ul class="pagination">
                    <li aria-current="page" class="page-item active">
                        <span class="page-link">
                            1
                            <span class="visually-hidden">(current)</span>
                        </span>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">4</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
@endsection

@section('scripts')
@endsection