@extends('front.layout.master')


@section('content')
    <!-- Page content-->
    <div class="container py-5 mt-4 mt-lg-5 mb-lg-4 my-xl-5">
        <div class="row pt-sm-2 pt-lg-0">
            <!-- Sidebar (offcanvas on sreens < 992px)-->
            <aside class="col-lg-3 pe-lg-4 pe-xl-5 mt-n3">
                <div class="position-lg-sticky top-0">
                    <div class="d-none d-lg-block" style="padding-top: 105px;"></div>
                    <div class="offcanvas-lg offcanvas-start" id="sidebarAccount">
                        <button class="btn-close position-absolute top-0 end-0 mt-3 me-3 d-lg-none" type="button"
                            data-bs-dismiss="offcanvas" data-bs-target="#sidebarAccount"></button>
                        <div class="offcanvas-body">
                         
                            <x-front.sidebar />

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

            <!-- Page content-->
            <div class="col-lg-9 pt-4 pb-2 pb-sm-4">
                <div class="d-flex align-items-center mb-4">
                    <h1 class="h2 mb-0">Wallet</h1>

                </div>
                <div class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4">
                    <div class="card-body pb-4">
                        <div class="row g-3 g-xl-4">

                            <div class="col-md-4 col-sm-6">
                                <div class="h-100 bg-secondary rounded-3 text-center p-4">
                                    <h2 class="h6 pb-2 mb-1">Your balance</h2>
                                    <div class="h2 text-primary mb-2">{{ $customer->credit }} EGP</div>
                                    <p class="fs-sm text-muted mb-0">Current Credit </p>
                                </div>
                            </div>
                            {{-- <div class="col-md-4 col-sm-6">
                                <div class="h-100 bg-secondary rounded-3 text-center p-4">
                                    <h2 class="h6 pb-2 mb-1">Last Transaction</h2>
                                    <div class="h2 text-primary mb-2">842.00 EGP</div>
                                    <p class="fs-sm text-muted mb-0">Transaction Date 8/15/2022</p>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="h-100 bg-secondary rounded-3 text-center p-4">
                                    <h2 class="h6 pb-2 mb-1">Point</h2>
                                    <div class="h2 text-primary mb-2">5343</div>
                                    <p class="fs-sm text-muted mb-0">Based on list price</p>
                                </div>
                            </div> --}}
                        </div>
                        <!-- Pagination-->
                        <div class="d-sm-flex align-items-center pt-4 pt-sm-5">

                            <a href="{{ URL('/customer_transaction')}}" class="btn btn-primary w-100 w-sm-auto order-sm-1 ms-sm-auto me-sm-n5"
                                >See your transaction</a>
                        </div>

                    </div>
                    <div class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4">
                      <div class="card-body pb-4">
                          <!-- Basic table -->
                          <div class="table-responsive">
                              <table class="table">
                                  <thead>
                                      <tr>
                                          <th>#</th>
                                          <th>Transaction ID</th>
                                         
      
                                          <th>balance before</th>
                                          <th>balance after</th>
                                          <th>amount</th>
                                          <th> Date</th>

                                      </tr>
                                  </thead>
                                  <tbody>
                                      @foreach ($wallet as $index => $wal)
                                          <tr>
                                              <th scope="row">{{ $index + 1 }}</th>
                                              <td><a href="{{ route('customer_transaction_details', $wal->transaction_id) }}">#
                                                      {{ $wal->transaction_id }}</a></td>
                                            

                                              <td>{{   $wal->status == 'withdraw' ? $wal->balance + $wal->from_wallet: $wal->balance - $wal->from_wallet }}</td>
                                              <td>{{  $wal->balance }}</td>
                                              <td>{{ $wal->amount }}</td>
                                              <td>{{ $wal->created_at }}</td>

      
      
                                          </tr>
                                      @endforeach
      
                                  </tbody>
                              </table>
                          </div>
                          <!-- Pagination-->
                          <div class="d-sm-flex align-items-center pt-4 pt-sm-5">
                              <nav class="order-sm-2 ms-sm-auto mb-4 mb-sm-0" aria-label="Orders pagination">
                                  <ul class="pagination pagination-sm justify-content-center">
                                      <li class="page-item active" aria-current="page"><span class="page-link">1<span
                                                  class="visually-hidden">(current)</span></span></li>
                                      <li class="page-item"><a class="page-link" href="#">2</a></li>
                                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                                      <li class="page-item"><a class="page-link" href="#">4</a></li>
                                  </ul>
                              </nav>
                              <button class="btn btn-primary w-100 w-sm-auto order-sm-1 ms-sm-auto me-sm-n5" type="button">Load
                                  more orders</button>
                          </div>
      
                      </div>
                  </div>
                </div>
            </div>

       


        </div>
    </div>
@endsection