@extends('layouts/contentLayoutMaster')

@section('title', 'Wallet')

@section('page-style')
  <link rel="stylesheet" href="{{ asset(('vendors/css/pincode/pincode.css')) }}">
@endsection

@section('content')
<section>
  <h2 class="page-title font-bolder text-primary mb-2" data-id="">{{ __('locale.wallet') }}</h2>
</section>

<section>
  <div class="modal fade" id="modal-pincode" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <button type="button" class="close btn-close-modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-center">
          <h4 class="text-primary mb-3">{{ __('locale.wallet_pin') }}</h5>
          <div class="wallet-pin mb-3" id="wallet-pin-verify"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-verify-pin">{{ __('locale.send') }}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modal-pincode-new" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-white">
          <button type="button" class="close btn-close-modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-center">
          <h4 class="text-primary mb-3">{{ __('locale.wallet_pin_new') }}</h5>
          <div class="wallet-pin mb-3" id="wallet-pin-new"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-send-pin">{{ __('locale.send') }}</button>
        </div>
      </div>
    </div>
  </div>

</section>

<section>
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <div class="d-flex mb-1">
            <span class="font-medium-3">{{ __('locale.your_balance') }}</span>
          </div>
          <div class="d-block mb-1">
            <span class="font-large-2 font-weight-bolder text-primary">{{number_format($userBalance->balance, 0, ',', '.')}}</span>
            <span class="font-medium-1 text-secondary">{{ __('locale.point') }}<span>
          </div>
          <span class="font-medium-1 text-secondary">* 1 {{ __('locale.point') }} = 1 Rupiah<span>
          <hr class="my-2">
          <div class="d-flex">
            
            {{-- <a href="{{route('wallet-deposit')}}" class="btn btn-primary w-50 px-1 ml-1">{{ __('locale.deposit') }}</a> --}}
          </div>
          <a href="{{route('wallet-withdraw')}}" class="btn btn-success w-100">{{ __('locale.withdraw') }}</a>
          <a href="{{route('wallet-bank')}}" class="btn btn-light-primary w-100 mt-1">{{ __('locale.add_bank') }}</a>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card balance-log">
        <div class="card-body">
          <div class="row">
            <div class="col-6">
              <div class="d-flex pt-50">
                <i data-feather="pocket" class="feather-25" height="40" width="40"></i>
                <span class="font-medium-3 ml-50">{{ __('locale.history_balance') }}</span>
              </div>
            </div>
            <div class="col-6 form-group mb-0">
              <div class="d-flex">
                <i data-feather="calendar" class="feather-25 mt-50 mr-1" height="40" width="40"></i>
                <div class="input-group">
                  <input type="text" id="fp-range" class="form-control flatpickr-range flatpickr-input input-balance-log" placeholder="YYYY-MM-DD to YYYY-MM-DD" readonly="readonly">
                  <button class="btn btn-outline-primary btn-right btn-search-balance-log" type="button">
                    <i data-feather="search"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <hr class="mt-2 mb-0">
          <div class="row content-empty hidden">
            <div class="col-md-12">
              <div class="col-md-12 text-center">
                  <div class="divider d-inline-block">
                      <div class="divider-text">{{ __('locale.balance_log_empty') }}</div>
                  </div>
              </div>
            </div>
          </div>
          <ul class="list-group list-group-flush list-balance-log" data-id={{Auth::user()->id}}>
          </ul>
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center mt-2">
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection
@section('vendor-script')
  <!-- vendor files -->
  <script src="{{ asset(('vendors/js/pincode/pincode.min.js')) }}"></script>
@endsection
@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('js/scripts/member/wallet.js')) }}"></script>
@endsection