@extends('layouts.app')

@push('css_or_js')
    {{-- <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" /> --}}
@endpush

@section('css_or_js')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('title')
@endsection

@section('content')
    @include('layouts._toolbar-details')

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">




            <div class="d-flex flex-column flex-xl-row">
                <!--begin::Sidebar-->
                <div class="flex-column flex-lg-row-auto w-100 w-xl-350px mb-10">

            <!--begin::Card-->
            <div class="card mb-5 mb-xl-8">
                <!--begin::Card body-->
                <div class="card-body pt-15">
                    <!--begin::Summary-->
                    <div class="d-flex flex-center flex-column mb-5">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-100px symbol-circle mb-7">
                            <img src="assets/media/avatars/300-1.jpg" alt="image">
                        </div>
                        <!--end::Avatar-->

                        <!--begin::Name-->
                        <a href="#" class="fs-3 text-gray-800 text-hover-primary fw-bold mb-3">Ibrahim Ali</a><div class="badge badge-light-info d-inline mb-5">Premium Customer</div>
                        <!--end::Name-->

                        <!--begin::Position-->

                        <!--end::Position-->

                        <!--begin::Info-->
                        <div class="d-flex flex-wrap flex-center">
                            <!--begin::Stats-->
                            <div class="border border-gray-300 border-dashed rounded py-3 px-3 mb-3">
                                <div class="fs-4 fw-bold text-gray-700">
                                    <span class="w-75px">120</span>
                                    <i class="ki-duotone ki-arrow-up fs-3 text-success"><span class="path1"></span><span class="path2"></span></i>                    </div>
                                <div class="fw-semibold text-muted">joining</div>
                            </div>
                            <!--end::Stats-->

                            <!--begin::Stats-->
                            <div class="border border-gray-300 border-dashed rounded py-3 px-3 mx-4 mb-3">
                                <div class="fs-4 fw-bold text-gray-700">
                                    <span class="w-50px">20</span>
                                    <i class="ki-duotone ki-arrow-down fs-3 text-danger"><span class="path1"></span><span class="path2"></span></i>                    </div>
                                <div class="fw-semibold text-muted">Win</div>
                            </div>
                            <!--end::Stats-->

                            <!--begin::Stats-->
                            <div class="border border-gray-300 border-dashed rounded py-3 px-3 mb-3">
                                <div class="fs-4 fw-bold text-gray-700">
                                    <span class="w-50px">20</span>
                                    <i class="ki-duotone ki-arrow-up fs-3 text-success"><span class="path1"></span><span class="path2"></span></i>                    </div>
                                <div class="fw-semibold text-muted">Order</div>
                            </div>
                            <!--end::Stats-->
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::Summary-->

                    <!--begin::Details toggle-->
                    <div class="d-flex flex-stack fs-4 py-3">
                        <div class="fw-bold rotate collapsible" data-bs-toggle="collapse" href="#kt_customer_view_details" role="button" aria-expanded="false" aria-controls="kt_customer_view_details">
                            Details
                            <span class="ms-2 rotate-180">
                                <i class="ki-duotone ki-down fs-3"></i>                </span>
                        </div>


                    </div>
                    <!--end::Details toggle-->

                    <div class="separator separator-dashed my-3"></div>

                    <!--begin::Details content-->
                    <div id="kt_customer_view_details" class="collapse show">
                        <div class="py-5 fs-6">
                            <!--begin::Badge-->

                            <!--begin::Badge-->

                                                <!--begin::Details item-->
                                <div class="fw-bold mt-5">Account ID</div>
                                <div class="text-gray-600">ID-454</div>
                                <!--begin::Details item-->
                                                <!--begin::Details item-->
                                <div class="fw-bold mt-5">User Account </div>
                                <div class="text-gray-600"><a href="#" class="text-gray-600 text-hover-primary">info@me.com</a></div>
                                <!--begin::Details item-->
                                                <!--begin::Details item-->
                                <div class="fw-bold mt-5">City</div>

                                <div class="text-gray-600">Ryadah</div><div class="fw-bold mt-5">Address</div><div class="text-gray-600">Ryadah , sweidy st , 245</div><!--begin::Details item-->
                                                <!--begin::Details item-->


                                <!--begin::Details item-->
                                                <!--begin::Details item-->


                                <!--begin::Details item-->
                                                <!--begin::Details item-->


                                <!--begin::Details item-->
                                        </div>
                    </div>
                    <!--end::Details content-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
                    <!--begin::Connected Accounts-->

            <!--end::Connected Accounts-->    </div>
                <!--end::Sidebar-->

                <!--begin::Content-->
                <div class="flex-lg-row-fluid ms-lg-15">
                    <!--begin:::Tabs-->
                    <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8" role="tablist">
                        <!--begin:::Tab item-->
                        <li class="nav-item" role="presentation">
                            <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_customer_view_overview_tab" aria-selected="true" role="tab">Joined Auctions</a>
                        </li>
                        <!--end:::Tab item-->

                        <!--begin:::Tab item-->
                        <li class="nav-item" role="presentation">
                            <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_customer_view_overview_events_and_logs_tab" aria-selected="false" role="tab" tabindex="-1"> Order list</a>
                        </li>
                        <!--end:::Tab item-->

                        <!--begin:::Tab item-->
                        <li class="nav-item" role="presentation">
                            <a class="nav-link text-active-primary pb-4" data-kt-countup-tabs="true" data-bs-toggle="tab" href="#kt_customer_view_overview_statements" data-kt-initialized="1" aria-selected="false" role="tab" tabindex="-1">Invoices</a>
                        </li>
                        <!--end:::Tab item-->

                        <!--begin:::Tab item-->
                        <li class="nav-item ms-auto">
                            <!--begin::Action menu-->

                            <!--begin::Menu-->

            <!--end::Menu-->
                            <!--end::Menu-->
                        </li>
                        <!--end:::Tab item-->
                    </ul>
                    <!--end:::Tabs-->

                    <!--begin:::Tab content-->
                    <div class="tab-content" id="myTabContent">
                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade active show" id="kt_customer_view_overview_tab" role="tabpanel">
                            <!--begin::Card-->
            <div class="card card-flush">
                                        <!--begin::Card header-->
                                        <div class="card-header mt-5">
                                            <!--begin::Card title-->
                                            <div class="card-title flex-column">
                                                <h3 class="fw-bold mb-1">Joined Auctions</h3>

                                                <div class="fs-6 text-gray-500">Total 15 Auctions</div>
                                            </div>
                                            <!--begin::Card title-->

                                            <!--begin::Card toolbar-->
                                            <div class="card-toolbar my-1" data-select2-id="select2-data-177-cke8">
                                                <!--begin::Select-->

                                                <!--end::Select-->

                                                <!--begin::Select-->

                                                <!--end::Select-->

                                                <!--begin::Search-->

                                                <!--end::Search-->
                                            </div>
                                            <!--begin::Card toolbar-->
                                        </div>
                                        <!--end::Card header-->

                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Table container-->
                                            <div class="table-responsive">
                                                <!--begin::Table-->
                                                <div id="kt_profile_overview_table_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer">
                                                    <div id="" class="table-responsive">
                                                        <table id="kt_profile_overview_table" class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable" style="width: 928.5px;">
                                                            <colgroup>
                                                                <col style="width: 300.433px;">
                                                                <col style="width: 160.267px;">
                                                                <col style="width: 126.167px;">
                                                                <col style="width: 147.883px;">
                                                                <col style="width: 147.883px;">
                                                                <col style="width: 93.75px;">
                                                            </colgroup>
                                                            <thead class="fs-7 text-gray-500 text-uppercase">
                                                                <tr role="row">
                                                                    <th data-dt-column="0" rowspan="1" colspan="1" aria-label="Manager: Activate to sort" tabindex="0" class="min-w-220px dt-orderable-asc dt-orderable-desc">
                                                                        <span class="dt-column-title" role="button">Auction</span><span class="dt-column-order"></span>
                                                                    </th>
                                                                    <th class="min-w-150px dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Creation
                                                                            date</span><span class="dt-column-order"></span></th>
                                                                    <th class="min-w-90px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0">
                                                                        <span class="dt-column-title" role="button">End
                                                                            Date</span><span class="dt-column-order"></span>
                                                                    </th>
                                                                    <th data-dt-column="3" rowspan="1" colspan="1" aria-label="Status: Activate to sort" tabindex="0" class="min-w-40px dt-orderable-asc dt-orderable-desc">
                                                                        <span class="dt-column-title" role="button">Status</span><span class="dt-column-order"></span>
                                                                    </th>

                                                                    <th class="min-w-50px text-end dt-orderable-asc dt-orderable-desc" data-dt-column="4" rowspan="1" colspan="1" aria-label="Details: Activate to sort" tabindex="0">
                                                                        <span class="dt-column-title" role="button">Actions</span><span class="dt-column-order"></span>
                                                                    </th>
                                                                </tr>
                                                            </thead>

                                                            <tbody class="fs-6">

                                                                <tr>
                                                                    <td>
                                                                        <!--begin::User-->
                                                                        <div class="d-flex align-items-center">
                                                                            <!--begin::Wrapper-->
                                                                            <div class="me-5 position-relative">
                                                                                <!--begin::Avatar-->
                                                                                <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                                                                        M </span>
                                                                                </div>
                                                                                <!--end::Avatar-->

                                                                                <!--begin::Online-->
                                                                                <div class="bg-success position-absolute h-8px w-8px rounded-circle translate-middle start-100 top-100 ms-n1 mt-n1">
                                                                                </div>
                                                                                <!--end::Online-->
                                                                            </div>
                                                                            <!--end::Wrapper-->

                                                                            <!--begin::Info-->
                                                                            <div class="d-flex flex-column justify-content-center">
                                                                                <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                                                    Auction Title
                                                                                </a>

                                                                                <div class="fw-semibold text-gray-500">
                                                                                    Branch / City</div>
                                                                            </div>
                                                                            <!--end::Info-->
                                                                        </div>
                                                                        <!--end::User-->
                                                                    </td>
                                                                    <td data-order="2024-06-24T00:00:00+03:00">Jun 24, 2024</td>
                                                                    <td data-order="2024-06-24T00:00:00+03:00">Jun 30, 2024</td>
                                                                    <td>
                                                                        <span class="badge badge-light-warning fw-bold px-4 py-3">
                                                                            Pending </span>
                                                                    </td>

                                                                    <td class="text-end">
                                                                        <a href="#" class="btn btn-light btn-sm">View</a>
                                                                    </td>
                                                                </tr><tr>
                                                                    <td>
                                                                        <!--begin::User-->
                                                                        <div class="d-flex align-items-center">
                                                                            <!--begin::Wrapper-->
                                                                            <div class="me-5 position-relative">
                                                                                <!--begin::Avatar-->
                                                                                <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                                                                        M </span>
                                                                                </div>
                                                                                <!--end::Avatar-->

                                                                                <!--begin::Online-->
                                                                                <div class="bg-success position-absolute h-8px w-8px rounded-circle translate-middle start-100 top-100 ms-n1 mt-n1">
                                                                                </div>
                                                                                <!--end::Online-->
                                                                            </div>
                                                                            <!--end::Wrapper-->

                                                                            <!--begin::Info-->
                                                                            <div class="d-flex flex-column justify-content-center">
                                                                                <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                                                    Auction Title
                                                                                </a>

                                                                                <div class="fw-semibold text-gray-500">
                                                                                    Branch / City</div>
                                                                            </div>
                                                                            <!--end::Info-->
                                                                        </div>
                                                                        <!--end::User-->
                                                                    </td>
                                                                    <td data-order="2024-06-24T00:00:00+03:00">Jun 24, 2024</td>
                                                                    <td data-order="2024-06-24T00:00:00+03:00">Jun 30, 2024</td>
                                                                    <td>
                                                                        <span class="badge badge-light-warning fw-bold px-4 py-3">
                                                                            Pending </span>
                                                                    </td>

                                                                    <td class="text-end">
                                                                        <a href="#" class="btn btn-light btn-sm">View</a>
                                                                    </td>
                                                                </tr><tr>
                                                                    <td>
                                                                        <!--begin::User-->
                                                                        <div class="d-flex align-items-center">
                                                                            <!--begin::Wrapper-->
                                                                            <div class="me-5 position-relative">
                                                                                <!--begin::Avatar-->
                                                                                <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                                                                        M </span>
                                                                                </div>
                                                                                <!--end::Avatar-->

                                                                                <!--begin::Online-->
                                                                                <div class="bg-success position-absolute h-8px w-8px rounded-circle translate-middle start-100 top-100 ms-n1 mt-n1">
                                                                                </div>
                                                                                <!--end::Online-->
                                                                            </div>
                                                                            <!--end::Wrapper-->

                                                                            <!--begin::Info-->
                                                                            <div class="d-flex flex-column justify-content-center">
                                                                                <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                                                    Auction Title
                                                                                </a>

                                                                                <div class="fw-semibold text-gray-500">
                                                                                    Branch / City</div>
                                                                            </div>
                                                                            <!--end::Info-->
                                                                        </div>
                                                                        <!--end::User-->
                                                                    </td>
                                                                    <td data-order="2024-06-24T00:00:00+03:00">Jun 24, 2024</td>
                                                                    <td data-order="2024-06-24T00:00:00+03:00">Jun 30, 2024</td>
                                                                    <td>
                                                                        <span class="badge badge-light-warning fw-bold px-4 py-3">
                                                                            Pending </span>
                                                                    </td>

                                                                    <td class="text-end">
                                                                        <a href="#" class="btn btn-light btn-sm">View</a>
                                                                    </td>
                                                                </tr>






                                                            </tbody><tfoot></tfoot>
                                                        </table>
                                                    </div>
                                                    <div id="" class="row">
                                                        <div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar">
                                                            <div><select name="kt_profile_overview_table_length" aria-controls="kt_profile_overview_table" class="form-select form-select-solid form-select-sm" id="dt-length-1">
                                                                    <option value="10">10</option>
                                                                    <option value="25">25</option>
                                                                    <option value="50">50</option>
                                                                    <option value="100">100</option>
                                                                </select><label for="dt-length-1"></label></div>
                                                        </div>
                                                        <div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                            <div class="dt-paging paging_simple_numbers">
                                                                <ul class="pagination">
                                                                    <li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_profile_overview_table" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li>
                                                                    <li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_profile_overview_table" aria-current="page" data-dt-idx="0" tabindex="0">1</a>
                                                                    </li>
                                                                    <li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_profile_overview_table" data-dt-idx="1" tabindex="0">2</a></li>
                                                                    <li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_profile_overview_table" data-dt-idx="2" tabindex="0">3</a></li>
                                                                    <li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_profile_overview_table" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--end::Table-->
                                            </div>
                                            <!--end::Table container-->
                                        </div>
                                        <!--end::Card body-->
                                    </div>
            <!--end::Card-->

            <!--begin::Card-->

            <!--end::Card-->
                            <!--begin::Card-->

            <!--end::Card-->
                            <!--begin::Card-->

            <!--end::Card-->            </div>
                        <!--end:::Tab pane-->

                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade" id="kt_customer_view_overview_events_and_logs_tab" role="tabpanel">

            <!--begin::Card-->
            <div class="card card-flush">
                                        <!--begin::Card header-->
                                        <div class="card-header mt-5">
                                            <!--begin::Card title-->
                                            <div class="card-title flex-column">
                                                <h3 class="fw-bold mb-1">Order List</h3>

                                                <div class="fs-6 text-gray-500">Total 18 Order</div>
                                            </div>
                                            <!--begin::Card title-->

                                            <!--begin::Card toolbar-->
                                            <div class="card-toolbar my-1" data-select2-id="select2-data-177-cke8">
                                                <!--begin::Select-->

                                                <!--end::Select-->

                                                <!--begin::Select-->

                                                <!--end::Select-->

                                                <!--begin::Search-->

                                                <!--end::Search-->
                                            </div>
                                            <!--begin::Card toolbar-->
                                        </div>
                                        <!--end::Card header-->

                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Table container-->
                                            <div id="kt_customer_view_statement_tab_content" class="tab-content">
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_view_statement_1" class="py-0 tab-pane fade" role="tabpanel">
                                <!--begin::Table-->
                                <div id="kt_customer_view_statement_table_1_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_view_statement_table_1" class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200">
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0" role="row"><th class="w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="w-300px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Details: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Details</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody>


















                                                                <tr>
                                                <td data-order="2021-01-01T00:00:00+02:00">Nov 01, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Darknight transparency  36 Icons Pack</td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-24T00:00:00+02:00">Oct 24, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">423445721</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-2.60</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-08T00:00:00+02:00">Oct 08, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td>Cartoon Mobile Emoji Phone Pack</td>
                                                <td class="text-success dt-type-numeric">$76.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-15T00:00:00+02:00">Sep 15, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td>Iphone 12 Pro Mockup  Mega Bundle</td>
                                                <td class="text-success dt-type-numeric">$5.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-30T00:00:00+02:00">May 30, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">523445943</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-1.30</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-22T00:00:00+02:00">Apr 22, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">231445943</a></td>
                                                <td>Parcel Shipping / Delivery Service App</td>
                                                <td class="text-success dt-type-numeric">$204.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-09T00:00:00+02:00">Feb 09, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td>Visual Design Illustration</td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-01T00:00:00+02:00">Nov 01, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">984445943</a></td>
                                                <td>Abstract Vusial Pack</td>
                                                <td class="text-success dt-type-numeric">$52.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-04T00:00:00+02:00">Jan 04, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">324442313</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-0.80</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2021-01-01T00:00:00+02:00">Nov 01, 2021</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Darknight transparency  36 Icons Pack</td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_view_statement_table_1" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_1" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_1" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_view_statement_table_1" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_view_statement_2" class="py-0 tab-pane fade" role="tabpanel">
                                <!--begin::Table-->
                                <div id="kt_customer_view_statement_table_2_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_view_statement_table_2" class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200">
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0" role="row"><th class="w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="w-300px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Details: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Details</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody>


















                                                                <tr>
                                                <td data-order="2020-01-30T00:00:00+02:00">May 30, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">523445943</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-1.30</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-22T00:00:00+02:00">Apr 22, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">231445943</a></td>
                                                <td>Parcel Shipping / Delivery Service App</td>
                                                <td class="text-success dt-type-numeric">$204.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-09T00:00:00+02:00">Feb 09, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td>Visual Design Illustration</td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-01T00:00:00+02:00">Nov 01, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">984445943</a></td>
                                                <td>Abstract Vusial Pack</td>
                                                <td class="text-success dt-type-numeric">$52.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-04T00:00:00+02:00">Jan 04, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">324442313</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-0.80</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-01T00:00:00+02:00">Nov 01, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Darknight transparency  36 Icons Pack</td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-24T00:00:00+02:00">Oct 24, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">423445721</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-2.60</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-08T00:00:00+02:00">Oct 08, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td>Cartoon Mobile Emoji Phone Pack</td>
                                                <td class="text-success dt-type-numeric">$76.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-15T00:00:00+02:00">Sep 15, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td>Iphone 12 Pro Mockup  Mega Bundle</td>
                                                <td class="text-success dt-type-numeric">$5.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2020-01-30T00:00:00+02:00">May 30, 2020</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">523445943</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-1.30</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_view_statement_table_2" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_2" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_2" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_view_statement_table_2" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_view_statement_3" class="py-0 tab-pane fade" role="tabpanel">
                                <!--begin::Table-->
                                <div id="kt_customer_view_statement_table_3_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_view_statement_table_3" class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200">
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0" role="row"><th class="w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="w-300px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Details: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Details</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody>


















                                                                <tr>
                                                <td data-order="2019-01-09T00:00:00+02:00">Feb 09, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td>Visual Design Illustration</td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-01T00:00:00+02:00">Nov 01, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">984445943</a></td>
                                                <td>Abstract Vusial Pack</td>
                                                <td class="text-success dt-type-numeric">$52.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-04T00:00:00+02:00">Jan 04, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">324442313</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-0.80</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-15T00:00:00+02:00">Sep 15, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td>Iphone 12 Pro Mockup  Mega Bundle</td>
                                                <td class="text-success dt-type-numeric">$5.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-01T00:00:00+02:00">Nov 01, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Darknight transparency  36 Icons Pack</td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-24T00:00:00+02:00">Oct 24, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">423445721</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-2.60</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-08T00:00:00+02:00">Oct 08, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td>Cartoon Mobile Emoji Phone Pack</td>
                                                <td class="text-success dt-type-numeric">$76.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-30T00:00:00+02:00">May 30, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">523445943</a></td>
                                                <td>Seller Fee</td>
                                                <td class="text-danger dt-type-numeric">$-1.30</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-22T00:00:00+02:00">Apr 22, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">231445943</a></td>
                                                <td>Parcel Shipping / Delivery Service App</td>
                                                <td class="text-success dt-type-numeric">$204.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="2019-01-09T00:00:00+02:00">Feb 09, 2019</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td>Visual Design Illustration</td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_view_statement_table_3" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_3" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_3" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_view_statement_table_3" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_view_statement_4" class="py-0 tab-pane fade active show" role="tabpanel">
                                <!--begin::Table-->
                                <div id="kt_customer_view_statement_table_4_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_view_statement_table_4" class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200">
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0" role="row"><th class="w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="w-300px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Details: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Details</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">State</span><span class="dt-column-order"></span></th><th class="w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Action</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody>


















                                                                <tr>
                                                <td data-order="2018-01-01T00:00:00+02:00">Nov 01, 2018</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Auction title + brand + city</td>
                                                <td class="text-success dt-type-numeric">$38.00</td><td>
                                                                        <span class="badge badge-light-warning fw-bold px-4 py-3">
                                                                            Pending </span>
                                                                    </td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">View</button></td>
                                            </tr><tr>
                                                <td data-order="2018-01-01T00:00:00+02:00">Nov 01, 2018</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Auction title + brand + city</td>
                                                <td class="text-success dt-type-numeric">$38.00</td><td>
                                                                        <span class="badge badge-light-warning fw-bold px-4 py-3">
                                                                            Pending </span>
                                                                    </td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">View</button></td>
                                            </tr><tr>
                                                <td data-order="2018-01-01T00:00:00+02:00">Nov 01, 2018</td>
                                                <td class="dt-type-numeric"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td>Auction title + brand + city</td>
                                                <td class="text-success dt-type-numeric">$38.00</td><td>
                                                                        <span class="badge badge-light-warning fw-bold px-4 py-3">
                                                                            Pending </span>
                                                                    </td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">View</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_view_statement_table_4" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_4" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_view_statement_table_4" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_view_statement_table_4" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                </div>
                                            <!--end::Table container-->
                                        </div>
                                        <!--end::Card body-->
                                    </div>
            <!--end::Card-->
                            <!--begin::Card-->

            <!--end::Card-->            </div>
                        <!--end:::Tab pane-->

                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade" id="kt_customer_view_overview_statements" role="tabpanel">
                            <!--begin::Earnings-->

            <!--end::Earnings-->


            <!--begin::Statements-->
            <div class="card card-flush">
                                        <!--begin::Card header-->
                                        <div class="card-header mt-5">
                                            <!--begin::Card title-->
                                            <div class="card-title flex-column">
                                                <h3 class="fw-bold mb-1">Invoices</h3>

                                                <div class="fs-6 text-gray-500">Total 18 Invoice</div>
                                            </div>
                                            <!--begin::Card title-->

                                            <!--begin::Card toolbar-->
                                            <div class="card-toolbar my-1" data-select2-id="select2-data-177-cke8">
                                                <!--begin::Select-->

                                                <!--end::Select-->

                                                <!--begin::Select-->

                                                <!--end::Select-->

                                                <!--begin::Search-->

                                                <!--end::Search-->
                                            </div>
                                            <!--begin::Card toolbar-->
                                        </div>
                                        <!--end::Card header-->

                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                    <!--begin::Tab Content-->
                    <div id="kt_referred_users_tab_content" class="tab-content">
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_details_invoices_1" class="py-0 tab-pane fade active show" role="tabpanel" aria-labelledby="kt_referrals_year_tab">
                                <!--begin::Table-->
                                <div id="kt_customer_details_invoices_table_1_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_details_invoices_table_1" class="table align-middle table-row-dashed fs-6 fw-bold gy-5 dataTable" style="width: 754.75px;"><colgroup><col style="width: 143.767px;"><col style="width: 143.767px;"><col style="width: 143.767px;"><col style="width: 179.7px;"><col style="width: 143.75px;"></colgroup>
                                    <thead class="border-bottom border-gray-200 fs-7 text-uppercase fw-bold">
                                        <tr class="text-start text-muted gs-0" role="row"><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Status: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Status</span><span class="dt-column-order"></span></th><th class="min-w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="min-w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody class="fs-6 fw-semibold text-gray-600">









                                                                <tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td><span class="badge badge-light-info">In progress</span></td>
                                                <td>Nov 01, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">View</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">423445721</a></td>
                                                <td class="text-danger dt-type-numeric">$-2.60</td>
                                                <td><span class="badge badge-light-danger">Rejected</span></td>
                                                <td>Oct 24, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">View</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td class="text-success dt-type-numeric">$76.00</td>
                                                <td><span class="badge badge-light-success">Approved</span></td>
                                                <td>Oct 08, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">View</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_details_invoices_table_1" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_1" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_1" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_details_invoices_table_1" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_details_invoices_2" class="py-0 tab-pane fade" role="tabpanel" aria-labelledby="kt_referrals_2019_tab">
                                <!--begin::Table-->
                                <div id="kt_customer_details_invoices_table_2_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_details_invoices_table_2" class="table align-middle table-row-dashed fs-6 fw-bold gy-5 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200 fs-7 text-uppercase fw-bold">
                                        <tr class="text-start text-muted gs-0" role="row"><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Status: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Status</span><span class="dt-column-order"></span></th><th class="min-w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="min-w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody class="fs-6 fw-semibold text-gray-600">









                                                                <tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">523445943</a></td>
                                                <td class="text-danger dt-type-numeric">$-1.30</td>
                                                <td><span class="badge badge-light-info">In progress</span></td>
                                                <td>May 30, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">231445943</a></td>
                                                <td class="text-success dt-type-numeric">$204.00</td>
                                                <td><span class="badge badge-light-danger">Rejected</span></td>
                                                <td>Apr 22, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td><span class="badge badge-light-warning">Pending</span></td>
                                                <td>Feb 09, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">984445943</a></td>
                                                <td class="text-success dt-type-numeric">$52.00</td>
                                                <td><span class="badge badge-light-warning">Pending</span></td>
                                                <td>Nov 01, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">324442313</a></td>
                                                <td class="text-danger dt-type-numeric">$-0.80</td>
                                                <td><span class="badge badge-light-danger">Rejected</span></td>
                                                <td>Jan 04, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_details_invoices_table_2" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_2" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_2" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_details_invoices_table_2" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_details_invoices_3" class="py-0 tab-pane fade" role="tabpanel" aria-labelledby="kt_referrals_2018_tab">
                                <!--begin::Table-->
                                <div id="kt_customer_details_invoices_table_3_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_details_invoices_table_3" class="table align-middle table-row-dashed fs-6 fw-bold gy-5 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200 fs-7 text-uppercase fw-bold">
                                        <tr class="text-start text-muted gs-0" role="row"><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Status: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Status</span><span class="dt-column-order"></span></th><th class="min-w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="min-w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody class="fs-6 fw-semibold text-gray-600">









                                                                <tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td><span class="badge badge-light-success">Approved</span></td>
                                                <td>Feb 09, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">984445943</a></td>
                                                <td class="text-success dt-type-numeric">$52.00</td>
                                                <td><span class="badge badge-light-success">Approved</span></td>
                                                <td>Nov 01, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">324442313</a></td>
                                                <td class="text-danger dt-type-numeric">$-0.80</td>
                                                <td><span class="badge badge-light-info">In progress</span></td>
                                                <td>Jan 04, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">312445984</a></td>
                                                <td class="text-success dt-type-numeric">$5.00</td>
                                                <td><span class="badge badge-light-info">In progress</span></td>
                                                <td>Sep 15, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td><span class="badge badge-light-warning">Pending</span></td>
                                                <td>Nov 01, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_details_invoices_table_3" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_3" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_3" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_details_invoices_table_3" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                                        <!--begin::Tab panel-->
                            <div id="kt_customer_details_invoices_4" class="py-0 tab-pane fade" role="tabpanel" aria-labelledby="kt_referrals_2017_tab">
                                <!--begin::Table-->
                                <div id="kt_customer_details_invoices_table_4_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer"><div id="" class="table-responsive"><table id="kt_customer_details_invoices_table_4" class="table align-middle table-row-dashed fs-6 fw-bold gy-5 dataTable" style="width: 0px;"><colgroup><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"><col style="width: 0px;"></colgroup>
                                    <thead class="border-bottom border-gray-200 fs-7 text-uppercase fw-bold">
                                        <tr class="text-start text-muted gs-0" role="row"><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="0" rowspan="1" colspan="1" aria-label="Order ID: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Order ID</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc" data-dt-column="1" rowspan="1" colspan="1" aria-label="Amount: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Amount</span><span class="dt-column-order"></span></th><th class="min-w-100px dt-orderable-asc dt-orderable-desc" data-dt-column="2" rowspan="1" colspan="1" aria-label="Status: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Status</span><span class="dt-column-order"></span></th><th class="min-w-125px dt-orderable-asc dt-orderable-desc" data-dt-column="3" rowspan="1" colspan="1" aria-label="Date: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Date</span><span class="dt-column-order"></span></th><th class="min-w-100px text-end pe-7 dt-orderable-none" data-dt-column="4" rowspan="1" colspan="1" aria-label="Invoice"><span class="dt-column-title">Invoice</span><span class="dt-column-order"></span></th></tr>
                                    </thead>
                                    <tbody class="fs-6 fw-semibold text-gray-600">









                                                                <tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td><span class="badge badge-light-warning">Pending</span></td>
                                                <td>Nov 01, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">423445721</a></td>
                                                <td class="text-danger dt-type-numeric">$-2.60</td>
                                                <td><span class="badge badge-light-warning">Pending</span></td>
                                                <td>Oct 24, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">102445788</a></td>
                                                <td class="text-success dt-type-numeric">$38.00</td>
                                                <td><span class="badge badge-light-warning">Pending</span></td>
                                                <td>Nov 01, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">423445721</a></td>
                                                <td class="text-danger dt-type-numeric">$-2.60</td>
                                                <td><span class="badge badge-light-danger">Rejected</span></td>
                                                <td>Oct 24, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr><tr>
                                                <td data-order="Invalid date"><a href="#" class="text-gray-600 text-hover-primary">426445943</a></td>
                                                <td class="text-success dt-type-numeric">$31.00</td>
                                                <td><span class="badge badge-light-success">Approved</span></td>
                                                <td>Feb 09, 2020</td>
                                                <td class="text-end"><button class="btn btn-sm btn-light btn-active-light-primary">Download</button></td>
                                            </tr></tbody>
                                <tfoot></tfoot></table></div><div id="" class="row"><div id="" class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar"></div><div id="" class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><ul class="pagination"><li class="dt-paging-button page-item disabled"><a class="page-link previous" aria-controls="kt_customer_details_invoices_table_4" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i class="previous"></i></a></li><li class="dt-paging-button page-item active"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_4" aria-current="page" data-dt-idx="0" tabindex="0">1</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link" aria-controls="kt_customer_details_invoices_table_4" data-dt-idx="1" tabindex="0">2</a></li><li class="dt-paging-button page-item"><a href="#" class="page-link next" aria-controls="kt_customer_details_invoices_table_4" aria-label="Next" data-dt-idx="next" tabindex="0"><i class="next"></i></a></li></ul></div></div></div></div>
                                <!--end::Table-->
                            </div>
                            <!--end::Tab panel-->
                                </div>
                    <!--end::Tab Content-->
                </div>
                                        <!--end::Card body-->
                                    </div>
            <!--end::Statements-->            </div>
                        <!--end:::Tab pane-->
                    </div>
                    <!--end:::Tab content-->
                </div>
                <!--end::Content-->
            </div>
        </div>
    </div>
@endsection


@section('custom')
    <!--begin::Vendors Javascript(used for this page only)-->
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>

    <!--end::Vendors Javascript-->


    <!--begin::Custom Javascript(used for this page only)-->
    <script src="{{ asset('assets/js/custom/apps/ecommerce/catalog/save-product.js') }}"></script>
    <script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/widgets.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/chat/chat.js') }}"></script>
    <script src="{{ asset('assets/js/custom/utilities/modals/upgrade-plan.js') }}"></script>
    <script src="{{ asset('assets/js/custom/utilities/modals/create-app.js') }}"></script>
    <script src="{{ asset('assets/js/custom/utilities/modals/users-search.js') }}"></script>

    <!--end::Custom Javascript-->
@endsection