@extends('frontend.userarea.layouts.main')
@section('content')

<div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>    

<div class="tab-content" style="visibility: visible;">
    <div id="dashboard_wrap" class="tab-pane fade in active">
        <div id="dashboard_statusdown" class="text-center"></div>
        <div id="dashboard">
            @include('frontend.userarea.transaction.navbar')
            
            <div class="tab-content" style="visibility: visible; margin-top: 10px;">
                <div id="history_tab" class="tab-pane fade active in">
                    <h4 class="hidden-xs hidden-sm" style="margin-left: 15px;">History Transaksi</h4>
                    
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-danger" style="margin: 0 0px;">
                                
                                <div class="panel-heading clearfix" style="padding: 10px 15px;">
    <div class="pull-left" style="margin-top: 4px;">
        <strong><span class="glyphicon glyphicon-tasks" style="margin-right: 5px;"></span>History Transaksi</strong>
    </div>
    
    <div class="pull-right">
        <form class="form-inline" action="{{ route('history') }}" method="GET" style="margin: 0;">
            <div class="form-group form-group-sm" style="margin: 0;">
                <select class="form-control" id="historyfilter" name="historyfilter" style="width: auto; height: 26px; padding: 2px 10px; font-size: 12px;" onchange="this.form.submit()">
                    <option {{ $option === 'all' ? 'selected' : '' }} value="all">Semua</option>
                    <option {{ $option === 'depo' ? 'selected' : '' }} value="depo">Deposit</option>
                    <option {{ $option === 'wede' ? 'selected' : '' }} value="wede">Withdraw</option>
                    <option {{ $option === 'dll' ? 'selected' : '' }} value="dll">Bonus/Promo/Freebet</option>
                </select>
            </div>
        </form>
    </div>
</div>
                                
                                <div class="panel-body" style="padding: 10px;">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-striped" style="margin-bottom: 0px; font-size: 13px;">
                                            <thead>
                                                <tr>
                                                    <th style="min-width: 130px; padding-left: 15px;">Tanggal</th>
                                                    <th>Deskripsi</th>
                                                    <th style="min-width: 100px; text-align: right;">+/-</th>
                                                    <th style="min-width: 100px; text-align: right; padding-right: 15px;">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($history as $item)
                                                    <tr>
                                                        <td style="padding-left: 15px; white-space: nowrap;">
                                                            {{ date('d M Y H:i:s', strtotime($item->created_at)) }}
                                                        </td>
                                                        <td>
                                                            <div style="line-height: 1.5;">
                                                                <small class="text-muted">No. Referensi : {{ $item->trx_id }}</small><br>
                                                                
                                                                <strong class="{{ $item->transaksi == 'Top Up' ? 'text-danger' : 'text-success' }}">
                                                                    {{ $item->transaksi == 'Top Up' ? 'Deposit' : $item->transaksi }}
                                                                </strong><br>
                                                                
                                                                @if ($item->transaksi == 'Top Up')
                                                                    <strong>Ke {{ strtoupper($item->metode) }}</strong>
                                                                @else
                                                                    <strong>Ke {{ strtoupper(auth()->user()->nama_bank) }} - {{ censor(auth()->user()->nomor_rekening, 8) }} - {{ censor(auth()->user()->nama_lengkap, 10) }}</strong>
                                                                @endif
                                                            </div>
                                                        </td>
                                                        <td align="right" style="white-space: nowrap; font-weight: bold;">
                                                            @if ($item->transaksi == 'Top Up')
                                                                <span class="text-danger">+{{ number_format($item->total) }}</span>
                                                            @else
                                                                <span class="text-success">-{{ number_format($item->total) }}</span>
                                                            @endif
                                                        </td>
                                                        <td align="right" style="white-space: nowrap; padding-right: 15px; font-weight: bold;">
                                                            @if ($item->status == 'Sukses')
                                                                <span class="text-success">Approved</span>
                                                            @elseif ($item->status == 'Ditolak')
                                                                <span class="text-danger">Rejected</span>
                                                            @elseif ($item->status == 'Dibatalkan')
                                                                <span class="text-danger">Cancelled</span>
                                                            @else
                                                                <span class="text-warning">Pending</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center" style="padding: 20px;">
                                                            <em>Belum ada riwayat transaksi.</em>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div> </div>
                    </div> <div class="row">
                        <div class="col-xs-12" style="margin-top: 15px; padding: 0 15px;">
                            <a class="btn btn-primary btn-block hidden-md hidden-lg" href="{{ url()->previous() }}" role="button" style="font-weight:bold; margin-bottom: 20px;">
                                <span class="glyphicon glyphicon-menu-left"></span> Kembali
                            </a>
                            @include('frontend.userarea.desc')
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="clearfix visible-lg"></div>
</div>

@endsection