@extends('layouts.main')

@section('isMobile')
<div class="content my01">

  @include('nav_saldo')
  <div class="container-wrapper acc">
    <div class="container container-box noSidePadding">

      <div class="head-content">
        <div class="row no-gutters">
          <div class="col-12">
            <ng-content select="app-game-bals"></ng-content>
          </div>
          <div class="col-12 account_menu">

            <div class="mdc-tab-bar" role="tablist">
              <div class="mdc-tab-scroller">
                <div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll mdc-tab-scroller__scroll-x"
                  style="margin-bottom: 0px;">
                  <div class="mdc-tab-scroller__scroll-content">
                    <ul class="list-inline">
                      <li>
                        <div class="deposit-notice-menu">
                          <a role="tab" href="{{ URL::to('account/deposit') }}"
                            data-active='accountdeposit' class="mdc-tab"
                            aria-selected="false" tabindex="-1"
                            id="goog_2098347606-FIXED-0">
                            <span class="mdc-tab__content">

                              <span class="mdc-tab__text-label">
                                Deposit
                              </span>

                            </span>

                            <span class="mdc-tab-indicator">
                              <span
                                class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
                                style=""></span>
                            </span>

                            <span class="mdc-tab__ripple mdc-ripple-upgraded"
                              style="--mdc-ripple-fg-size:91px; --mdc-ripple-fg-scale:1.8648; --mdc-ripple-fg-translate-start:76px, -10.5px; --mdc-ripple-fg-translate-end:30.6563px, -21.5px;"></span>
                            &nbsp;
                          </a>
                        </div>

                      </li>
                      <li>
                        <a role="tab" href="{{ URL::to('account/withdrawal') }}"
                          data-active='accountwithdrawal' class="mdc-tab" aria-selected="true"
                          tabindex="0" id="goog_2098347606-FIXED-1">
                          <span class="mdc-tab__content">

                            <span class="mdc-tab__text-label">
                              Withdraw
                            </span>

                          </span>

                          <span class="mdc-tab-indicator">
                            <span
                              class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
                              style=""></span>
                          </span>

                          <span class="mdc-tab__ripple mdc-ripple-upgraded"
                            style="--mdc-ripple-fg-size:93px; --mdc-ripple-fg-scale:1.85613; --mdc-ripple-fg-translate-start:48.6875px, -6.5px; --mdc-ripple-fg-translate-end:31.1875px, -22.5px;"></span>
                        </a>

                      </li>
                      <li>
                        <a role="tab" href="{{ URL::to('account/lastDirectTransfer') }}"
                          data-active='accountlastdirecttransfer' class="mdc-tab"
                          aria-selected="false" tabindex="-1" id="goog_2098347606-FIXED-3">
                          <span class="mdc-tab__content">

                            <span class="mdc-tab__text-label">
                              5 Transaksi Terakhir

                            </span>

                          </span>

                          <span class="mdc-tab-indicator">
                            <span
                              class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
                              style=""></span>
                          </span>

                          <span class="mdc-tab__ripple mdc-ripple-upgraded"
                            style="--mdc-ripple-fg-size:102px; --mdc-ripple-fg-scale:1.83267; --mdc-ripple-fg-translate-start:-44.1875px, -35px; --mdc-ripple-fg-translate-end:34.1484px, -27px;"></span>
                        </a>

                      </li>
                      <li>
                        <a role="tab" href="{{ URL::to('account/history') }}"
                          data-active='accounthistory' class="mdc-tab" aria-selected="false"
                          tabindex="-1" id="goog_2098347606-FIXED-2">
                          <span class="mdc-tab__content">

                            <span class="mdc-tab__text-label">
                              Pernyataan

                            </span>

                          </span>

                          <span class="mdc-tab-indicator">
                            <span
                              class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
                              style=""></span>
                          </span>

                          <span class="mdc-tab__ripple mdc-ripple-upgraded"
                            style="--mdc-ripple-fg-size:102px; --mdc-ripple-fg-scale:1.83267; --mdc-ripple-fg-translate-start:-44.1875px, -35px; --mdc-ripple-fg-translate-end:34.1484px, -27px;"></span>
                        </a>

                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content">


        <div class="row history">
          <div class="pb-4 pb-md-0 col-md-8">

            <link rel="stylesheet" type="text/css"
            href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
            <div class="history-table" *ngIf="history">

              <div class="row total-data text-center">

  {{-- CREDIT / UANG MASUK --}}
  <div class="col-xs-6 noSidePadding">
    <div>
      <div>
        Credit
      </div>
      <div>
        @currency($totalKredit)
      </div>
    </div>
  </div>

  {{-- DEBIT / UANG KELUAR --}}
  <div class="col-xs-6 noSidePadding">
    <div>
      <div>
        Debit
      </div>
      <div>
        @currency($totalDebit)
      </div>
    </div>
  </div>

</div>
              <div class="row">
                <div class="col-xs-12">
                  <div class=" mat-group">
                    <input type="text" class="mat-control"
                    (onChange)="onKeyUp($event.target.value )" required="required" />
                  <label>Saring</label>
                </div>
              </div>
            </div>

            @foreach ($transaksi as $item)
            <div class="row no-gutters h-result" (click)="openHistoryDetailsInModal($event,item);"
              *ngFor="let item of depositHistory">
              <div class="col-xs-6 row-head">
                <span class="js-date isutc">{{ $item->created_at }}
                </span>
              </div>
              <div class="col-xs-6  text-right">
                @if ($item->status == 1)
                @if ($item->type == 3)
                <span class="label-info">
                  Promotion
                </span>
                @else
                <span class="label-info">
                  In Progress
                </span>
                @endif
                @elseif ($item->status == 2)
                <span class="label-success">
                  Confirmed
                </span>
                @else
                <span class="label-danger">
                  Rejected
                </span>
                @endif
              </div>
              <div class="col-xs-6  ">

                @if ($item->type == 1)
                Deposit
                @elseif ($item->type == 2)
                Withdraw
                @elseif ($item->type == 3)
                Promotion Bonus
                @endif
              </div>
              <div class="col-xs-6 text-right">


                @if ($item->status == 1)
                @if ($item->type == 3)
                <strike>@currency($item->nominal)</strike>
                @else
                @currency($item->nominal)
                @endif
                @elseif ($item->status == 2)
                @currency($item->nominal)
                @else
                <strike>@currency($item->nominal)</strike>
                @endif
              </div>
              <div class="col-xs-4 row-footer">
                <small>
                  TransID:
                  @if ($item->type == 3)
                  {{ $item->trans_id_bonus }}
                  @else
                  {{ $item->trans_id }}
                  @endif
                </small>
              </div>

              @if ($item->destination_account)
              <div class="col-xs-8 row-footer text-right">
                @if ($item->tipe == 3)
                <small>{{ $item->p_name }}</small>
                @elseif ($item->type == 2)
                <small>
{{ $item->metode_withdraw == 5 ? 'Bank' : 'E-Wallet' }}
/ {{ $item->destination_account }}
</small>
                @else
                <small>{{ $item->metode_deposit }} / {{ $item->destination_account }}</small>
                @endif
              </div>
              @else
              <div class="col-xs-8 row-footer text-right">
                <small>{{ $item->p_name }}</small>
              </div>
              @endif

              <div class="col-xs-12 text-right">
                {{ $item->alasan }}
              </div>
            </div>
            @endforeach
          </div>
          <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
          <script>
            $(document).ready(function() {
              convertToLocalDate();
            });

            function convertToLocalDate() {
              console.log('convertToLocalDate');
              $('.js-date').each(function(i) {
                var dt = $(this).text().trim();
                var isutc = $(this).hasClass('isutc');

                if (isutc) {

                  if (dt && dt != '-') {

                    if (dt[dt.length - 1] != 'Z') {
                      dt = dt + 'Z';
                    }
                    $(this).text(moment.utc(dt).local().format("YYYY-MM-DD | HH:mm:ss"));
                    $(this).removeClass('isutc');
                  }
                }
              });
            }
          </script>



        </div>

      </div>
    </div>

  </div>
</div>


<script>
  $(document).ready(function() {

    $(function() {
      var path = window.location.pathname || '';
      path = path.replace(new RegExp('/', 'g'), '').toLowerCase();
      $('.mdc-tab[data-active="' + path + '"]').addClass('mdc-tab--active');
      $('.mdc-tab[data-active="' + path + '"] .mdc-tab-indicator').addClass(
        'mdc-tab-indicator--active');
    });

  });
</script>

</div>
@endsection

@section('isDesktop')
<div class="content my01">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">


<script type="text/javascript" src="https://cdn.sitestatic.net/assets/jquery/jquery.price_format.min.js?v=2"></script>
<div class="container-wrapper acc">

<div class="container container-box">
<div class="row">
<div class="col-md-8">
<div class="box-wrapper">
<div class="title" style="padding: 5px 0">
<div class="d-inline-block" style="padding-left:15px" i18n="">
Keamanan Akun: Normal
</div>
<div class="d-inline-block text-right" style="float:right;padding-right:15px">
Anda memiliki  <span class="txt_mail_cnt" style="display: none;">0</span>  pesan baru yang belum dibaca dari kami.
</div>
</div>

<div class="mdc-wrapper">
<a href="/account/deposit" class="mdc-items ">Deposit</a>
<a href="/account/withdrawal" class="mdc-items ">Withdraw</a>
<a href="/account/lastDirectTransfer" class="mdc-items active">5 Transaksi Terakhir                    </a>
<a href="/account/history" class="mdc-items ">Pernyataan</a>

</div>
</div>


<div style="padding-right: 15px;  padding-left: 15px;">
<div class="row history">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<div class="row d-flex flex-column align-items-center">

<div class="col-md-12 d-flex flex-wrap">
<div class="font-weight-bold m-15">

</div>
</div>
<div class="col-md-12 d-flex flex-wrap">
<div id="transaction-table_wrapper" class="dataTables_wrapper">
<div class="dataTables_length" id="transaction-table_length">
<label>Menampilkan
<select name="transaction-table_length" aria-controls="transaction-table" class="">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select> entri</label>
</div>
<div id="transaction-table_filter" class="dataTables_filter">
<label>
<input type="search" class="" placeholder="" aria-controls="transaction-table">
</label>
</div>

<table class="table table-bordered table-hover toggle-circle dataTable no-footer table-striped table-responsive" role="grid" aria-describedby="transaction-table_info" id="transaction-table">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-sort="ascending" aria-label=" # : activate to sort column descending" style="width: 9.96094px;"> #
</th>

<th class="sorting" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-label=" Tanggal Transaksi : activate to sort column ascending" style="width: 71.6719px;"> Tanggal Transaksi
</th>

<th class="sorting" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-label="Detail : activate to sort column ascending" style="width: 138.25px;">Detail
</th>

<th class="sorting" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-label=" Status  : activate to sort column ascending" style="width: 53.2109px;"> Status  </th>

<th class="sorting" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-label=" Alasannya  : activate to sort column ascending" style="width: 74.125px;"> Alasannya
</th>

<th class="sorting" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-label=" Debit  : activate to sort column ascending" style="width: 39.8594px;"> Debit  </th>

<th class="sorting" tabindex="0" aria-controls="transaction-table" rowspan="1" colspan="1" aria-label=" Kredit  : activate to sort column ascending" style="width: 66.9219px;"> Kredit  </th>

</tr>
</thead>
@foreach ($transaksi as $index => $item)
<tbody>
<tr role="row" class="odd">
<td class="sorting_1"> {{ $index + 1 }} </td>
<td>
<span class="js-date isutc">{{ $item->created_at }}</span>
</td>

<td>

<div>
Trx ID:
@if ($item->tipe == 3)
{{ $item->trans_id_bonus }}
@else
{{ $item->trans_id }}
@endif
</div>
<div>
Jenis Transaksi:
@if ($item->tipe == 1)
Deposit
@elseif ($item->tipe == 2)
Withdraw
@elseif ($item->tipe == 3)
Promotion Bonus
@endif
</div>
<div>
@if ($item->destination_account)
@if ($item->tipe == 3)
{{ $item->p_name }}
@elseif ($item->tipe == 2)
{{ $item->metode_withdraw }} / {{ $item->destination_account }}
@else
{{ $item->metode_deposit }} / {{ $item->destination_account }}
@endif

@else

{{ $item->p_name }}

@endif
</div>
</td>
<td>
@if ($item->status == 1)
@if ($item->tipe == 3)
<span class="label label-warning">
Promotion
</span>
@else
<span class="label label-warning">
In Progress
</span>
@endif
@elseif ($item->status == 2)
<span class="label label-success">
Confirmed
</span>
@else
<span class="label label-danger">
Rejected
</span>
@endif
</td>
<td>
{{ $item->alasan }}
</td>

<td>
<span class="text-warning"></span>
</td>
<td>
<span class="text-warning">@if ($item->status == 1)
@if ($item->tipe == 3)
<strike>@currency($item->nominal)</strike>
@else
@currency($item->nominal)
@endif
@elseif ($item->status == 2)
@currency($item->nominal)
@else
<strike>@currency($item->nominal)</strike>
@endif</span>
</td>

</tr>
</tbody>
@endforeach
<tfoot>
<tr>
<th colspan="4" rowspan="1">

</th>
<th rowspan="1" colspan="1">Jumlah</th>
<td rowspan="1" colspan="1"> 0.00 </td>
<td rowspan="1" colspan="1"> @currency($totalKredit)</td>

</tr>
</tfoot>

</table>
<div class="dataTables_info" id="transaction-table_info" role="status" aria-live="polite">
Menampilkan 1 hingga 1 dari 1 item
</div>
<div class="dataTables_paginate paging_simple_numbers" id="transaction-table_paginate">
<a class="paginate_button previous disabled" aria-controls="transaction-table" data-dt-idx="0" tabindex="-1" id="transaction-table_previous">Sebelumnya</a>
<span>
<a class="paginate_button current" aria-controls="transaction-table" data-dt-idx="1" tabindex="0">1
</a>
</span>
<a class="paginate_button next disabled" aria-controls="transaction-table" data-dt-idx="2" tabindex="-1" id="transaction-table_next">Lanjut
</a>

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


<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
 <script>
            $(document).ready(function() {
              convertToLocalDate();
            });

            function convertToLocalDate() {
              console.log('convertToLocalDate');
              $('.js-date').each(function(i) {
                var dt = $(this).text().trim();
                var isutc = $(this).hasClass('isutc');

                if (isutc) {

                  if (dt && dt != '-') {

                    if (dt[dt.length - 1] != 'Z') {
                      dt = dt + 'Z';
                    }
                    $(this).text(moment.utc(dt).local().format("YYYY-MM-DD | HH:mm:ss"));
                    $(this).removeClass('isutc');
                  }
                }
              });
            }
          </script>


</div>
</div>
</div>
<div class="col-md-4">

<div class="acc_safety_info box-wrapper">
<div class="info-2">
<i class="icon-shield"></i>
<a routerlink="/profile/edit"><i class="icon-user1"></i></a>
<a href="#"><i class="icon-credit-card-alt"></i></a>
<a href="#"><i class="icon-mobile1"></i></a>
<a href="/memo" class="mail_link">
<i class="icon-envelope"></i>
</a>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
window.getAllGameBal();
});

</script>




</div>

</div>


</div>
</div>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>
</div>
@endsection