@extends('dashboards.vendor.index')

@section('content')


    <div class="col-lg-9 layout">
        <h2 class="mainHeadig">Wallet</h2>
        <div class="profileSetting totalOrder">
            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                       aria-controls="pills-home" aria-selected="true">Main Wallet</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
                       aria-controls="pills-profile" aria-selected="false">Connect with admin (Stripe)</a>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                    <div class="walletPage">
                        <div class="recentTable totalPayment-table tablecard">
                            <ul class="waletOne">
                                <li>Main Wallet</li>
                                <li>Available Fundss</li>
                            </ul>
                            <ul class="waletTwo">
                                <li>
                                    <h4>{{ ($user->gender == 'Male') ? 'Mr.' :
                    (($user->gender == 'Female') ? 'Mrs.' : '') }}
                                        {{$user->name ?? ''}}
                                    </h4>
                                    <h3>**** **** **** 1234</h3>
                                </li>
                                <li><strong>{{ $payAmounts['availableFunds'] }}.00 </strong><sup>$</sup></li>
                            </ul>
                            <ul class="waletThre">
                                <div class="d-flex">
                                    <ul>
                                        <li>
                                            <figure><img src="{{ asset('dashboard-assets/images/income.png') }}"
                                                         class="img-fluid"
                                                         alt="img">
                                            </figure>
                                            <div>
                                                <h4>{{ $payAmounts['allFunds'] }}.00 $</h4>
                                                <h5>Income</h5>
                                            </div>
                                        </li>
                                        <li>
                                            <figure><img src="{{ asset('dashboard-assets/images/withdraw.png') }}"
                                                         class="img-fluid"
                                                         alt="img">
                                            </figure>
                                            <div>
                                                <h4>{{ $payAmounts['withdrawFunds'] }}.00 $</h4>
                                                <h5>Withdraw</h5>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                        </div>
                    </div>
                    <h2 class="mainHeadig">Transaction History</h2>
                    <div class="recentTable tablecard transactionList">
                        <div class="table-responsive-lg">
                            <table class="table table-striped">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">Invoice No#</th>
                                    <th scope="col">Paid</th>
                                    <th scope="col">Remaining</th>
                                    <th scope="col">Admin Commission</th>
                                    <th scope="col">Total Cost</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Action</th>
                                </tr>
                                </thead>
                                <tbody>

                                @forelse($myTransactions as $transaction)
                                    <tr>
                                        <td>
                                            <div class="detailMain">
                                                <div class="title mb-0">
                                                    <h6>{{ $transaction->details->invoice_number ?? '' }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            {{   $transaction->amount_paid ?? 0 }}$
                                        </td>
                                        <td>
                                            {{   $transaction->amount_remaining ?? 0 }}$
                                        </td>
                                        <td>
                                            {{   $transaction->admin_commision ?? 0 }}$
                                        </td>
                                        <td>
                                            {{   $transaction->total_amount ?? 0 }}$
                                        </td>
                                        <td> {{ $transaction->status ?? '' }} </td>
                                        <td>
                                            <div class="d-flex justify-content-center">
                                                <a class="themeBtn"
                                                   href="{{ route('order.pdf', ['invoice' => $transaction->id, 'page'=> 'product_orders']) }}"
                                                   target="_blank">
                                                    PDF <i class="fas fa-download"></i> </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7">No transaction available yet!</td>
                                    </tr>
                                @endforelse

                                </tbody>
                            </table>


                            <div class="col-md-12">
                                <nav class="pagination">
                                    {{ $myTransactions->links('alerts.custom-pagination') }}
                                </nav>
                            </div>


                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                    <div class="recentTable totalPayment-table tablecard">
                        <div class="visaBox">
                            <div class="d-flex">
                                <h2>Connect Your Account </h2>
                                <ul>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card1.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card2.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card3.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card4.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card5.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card6.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                    <li><a href="#"><img src="{{ asset('dashboard-assets/images/card7.png') }}"
                                                         class="img-fluid"
                                                         alt="img"></a></li>
                                </ul>
                            </div>

                            <div class="profil-wrap" style="padding-bottom: 80px">
                                <p style="float: left;">Connect with admin stripe account to receive your booking
                                    payments</p>
                                <br/>
                                @if (Auth::user()->stripe_account_id != null)
                                    <h1 class="mt-3">Connected</h1>
                                @else
                                    <a href="{{route('vendor.stripe.account')}}" class="themeBtn btn1"
                                       style="float: right; "><span>Connect</span></a>
                                @endif

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- section css end -->
    </div>
    </div>
    </section>


@endsection