@extends('themes.flaty.layouts.single')
@section('title', translate('Payment Proof', 'payment proof'))
@section('content')
    <section class="section">
        <x-ad alias="other_pages_top" @class('ad-728x90 mb-5') />
        <div class="container">
            <div class="section-body">
                <div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-2 g-3">
                    <div class="col">
                        <div class="card-v">
                            <div class="proof-counter">
                                <div>
                                    <h5 class="proof-counter-title">{{ translate('Total Requests', 'payment proof') }}</h5>
                                    <p class="proof-counter-text">{{ $counters['total_requests'] }}</p>
                                </div>
                                <div class="proof-counter-icon">
                                    <svg class="fill-primary" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M31,7H1A1,1,0,0,0,0,8V24a1,1,0,0,0,1,1H31a1,1,0,0,0,1-1V8A1,1,0,0,0,31,7ZM25.09,23H6.91A6,6,0,0,0,2,18.09V13.91A6,6,0,0,0,6.91,9H25.09A6,6,0,0,0,30,13.91v4.18A6,6,0,0,0,25.09,23ZM30,11.86A4,4,0,0,1,27.14,9H30ZM4.86,9A4,4,0,0,1,2,11.86V9ZM2,20.14A4,4,0,0,1,4.86,23H2ZM27.14,23A4,4,0,0,1,30,20.14V23Z" />
                                        <path
                                            d="M7.51.71a1,1,0,0,0-.76-.1,1,1,0,0,0-.61.46l-2,3.43a1,1,0,0,0,1.74,1L7.38,2.94l5.07,2.93a1,1,0,0,0,1-1.74Z" />
                                        <path
                                            d="M24.49,31.29a1,1,0,0,0,.5.14.78.78,0,0,0,.26,0,1,1,0,0,0,.61-.46l2-3.43a1,1,0,1,0-1.74-1l-1.48,2.56-5.07-2.93a1,1,0,0,0-1,1.74Z" />
                                        <path
                                            d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-v">
                            <div class="proof-counter">
                                <div>
                                    <h5 class="proof-counter-title">{{ translate('Total Paid Amount', 'payment proof') }}
                                    </h5>
                                    <p class="proof-counter-text">{{ earnings($counters['total_paid_amount']) }}</p>
                                </div>
                                <div class="proof-counter-icon">
                                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M3.17157 20.8284C4.34315 22 6.22876 22 10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14C22 12.8302 22 11.8419 21.965 11M20.8284 7.17157C19.6569 6 17.7712 6 14 6H10C6.22876 6 4.34315 6 3.17157 7.17157C2 8.34315 2 10.2288 2 14C2 15.1698 2 16.1581 2.03496 17"
                                            class="stroke-primary" stroke-width="1.5" stroke-linecap="round" />
                                        <path
                                            d="M12 2C13.8856 2 14.8284 2 15.4142 2.58579C16 3.17157 16 4.11438 16 6M8.58579 2.58579C8 3.17157 8 4.11438 8 6"
                                            class="stroke-primary" stroke-width="1.5" stroke-linecap="round" />
                                        <path
                                            d="M12 17.3333C13.1046 17.3333 14 16.5871 14 15.6667C14 14.7462 13.1046 14 12 14C10.8954 14 10 13.2538 10 12.3333C10 11.4129 10.8954 10.6667 12 10.6667M12 17.3333C10.8954 17.3333 10 16.5871 10 15.6667M12 17.3333V18M12 10V10.6667M12 10.6667C13.1046 10.6667 14 11.4129 14 12.3333"
                                            class="stroke-primary" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="proof-table mt-4">
                    @if ($withdrawals->count() > 0)
                        <div class="card-v overflow-hidden p-4">
                            <div class="table-responsive">
                                <table class="table mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-start">{{ translate('Date', 'payment proof') }}</th>
                                            <th>{{ translate('Username', 'payment proof') }}</th>
                                            <th>{{ translate('Amount', 'payment proof') }}</th>
                                            <th class="text-end">{{ translate('Method', 'payment proof') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($withdrawals as $withdrawal)
                                            <tr>
                                                <td class="text-start">{{ dateFormat($withdrawal->created_at) }}
                                                </td>
                                                <td>{{ $withdrawal->user->usernameMasked() }}</td>
                                                <td class="text-success">
                                                    <strong>{{ earnings($withdrawal->total) }}</strong>
                                                </td>
                                                <td class="text-end">{{ $withdrawal->method }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {{ $withdrawals->links() }}
                    @else
                        <div class="card-v">
                            <div class="text-center text-muted">
                                {{ translate('No payment proofs available', 'payment proof') }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <x-ad alias="other_pages_bottom" @class('ad-728x90 mt-5') />
    </section>
@endsection