@extends('layouts.master')
@section('content')

<!-- Main Content -->

            <div class="container-fluid">

				<!-- Title -->
				<div class="row heading-bg" style="background-color:  {!! \App\Helper::barColor() !!}">
					<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
						<h5 class="txt-light">{!! \App\Helper::panelName() !!}</h5>
					</div>
					<!-- Breadcrumb -->
					<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
						<ol class="breadcrumb">
						    <li><a href="{{ url('/') }}"><span class="font-nexa">{!! \App\Helper::panelName() !!}</a></li>
							<li><a href="{{ url('/') }}">Auto Add Saldo</a></li>
						</ol>
					</div>
					<!-- /Breadcrumb -->
				</div>
				<!-- /Title -->

				<div class="row">
				    
				    
                    @if(auth()->user()->level == 'admin')
                    <div class="col-xs-12 col-md-12">
				        <div class="panel panel-default" style="color: {!! \App\Helper::barColor() !!}">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <span class="label" style="background-color: {!! \App\Helper::barColor() !!}">{{ auth()->user()->level }}</span>
                                    </div>
                                    <div class="col-xs-10 text-right">
                                        <h6>{!! \App\Helper::panelName() !!} Total Pembelian</h6>
                                    </div>
                                </div>
                                <hr style="border-top: 1px solid {!! \App\Helper::barColor() !!}">

                                 <div class="text-center">
                                    
                    				 
                                              <h3 class="mt-5 mb-5">TOTAL PEMBELIAN SALDO : {{"Rp " . number_format($saldo,2,',','.')}}</h3>
                                              <h3 class="mt-5 mb-5">TOTAL PEMBELIAN JAP : {{"Rp " . number_format($jap,2,',','.')}}</h3>
                                              <h3 class="mt-5 mb-5">TOTAL PEMBELIAN REGRAM : {{"Rp " . number_format($regram,2,',','.')}}</h3>
                                        
                                        
                                </div>


                                
				    </div>



				   


				</div>



    </div>
    @endif

				    <div class="col-xs-12 col-md-12">
				        <div class="panel panel-default" style="color: {!! \App\Helper::barColor() !!}">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <span class="label" style="background-color: {!! \App\Helper::barColor() !!}">{{ auth()->user()->level }}</span>
                                    </div>
                                    <div class="col-xs-10 text-right">
                                        <h6>{!! \App\Helper::panelName() !!} Riwayat Pembelian</h6>
                                    </div>
                                </div>
                                <hr style="border-top: 1px solid {!! \App\Helper::barColor() !!}">

                                 <div class="table-responsive">
                                    <table class="table table-bordered table-hover" id="users-table">
                                        <thead>
                                            <tr>
                                                <th>ID Pesanan</th>
                                                <th>Layanan</th>
                                                <th>Data</th>
                                                <th>Jumlah</th>
                                                <th>Harga</th>
                                                <th>Status</th>
                                                <th>Start</th>
                                                <th>Remains</th>
                                                <th>API</th>
                                                <th>Refund</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>


                                
				    </div>



				   


				</div>



    </div>




			</div>

@endsection

@section('js')

<script>

$(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '/user/history/histojs',
        columns: [
            { data: 'oid', name: 'oid' },
            { data: 'service', name: 'service' },
            { data: 'link', 
                render: function(data, type, row){
                    return '<a href="'+data+'">'+data+'</a>';
                }
            },
            { data: 'quantity', name: 'quantity' },
            { data: 'price', name: 'price' },
            { data: 'status', 
                render: function(data, type, row){
                    if(data == 'Success'){
                        return '<span class="badge badge-success">'+data+'</span>';
                    }else if(data == 'Processing'){
                        return '<span class="badge badge-primary">'+data+'</span>';
                    }else if(data == 'Partial'){
                        return '<span class="badge badge-secondary">'+data+'</span>';
                    }else if(data == 'Pending'){
                        return '<span class="badge badge-warning">'+data+'</span>';
                    }else{
                        return '<span class="badge badge-danger">'+data+'</span>';
                    }
                }
            },
            { data: 'start_count', name: 'start_count' },
            { data: 'remains', name: 'remains' },
            { data: 'place_form', 
                render: function(data, type, row){
                    if(data == 'API'){
                        return '<span class="badge badge-primary"><i class="fa fa-check"></i></span>';
                    }
                    else {
                        return '<span class="badge badge-danger"><i class="fa fa-times"></i></span>';
                    }
                }
            },
            { data: 'refund', render: function ( data, type, row ) {
                  if (data == 1) {
                    return '<span class="badge badge-primary"><i class="fa fa-check"></i></span>';
                    }
                  else {
                    return '<span class="badge badge-danger"><i class="fa fa-times"></i></span>';
                    }
                }
            },      
            

            
         

        ]
    });
});
$(document).ready(function() {
    var table = $('#users-table').DataTable();
     
    // $('#users-table tbody').on('click', 'tr', function () {
    //     var data = table.row( this ).data();
    //     alert( 'You clicked on '+data[0]+'\'s row' );
    // } );
} );
</script>

@endsection