@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>{{ucwords($wallet_history_query[0]->owner_firstname.' '.$wallet_history_query[0]->owner_surname)}}</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="#"><div class="text-tiny">Users</div></a>
        </li>

        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Satellite</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Wallet History</div>
        </li>
    </ul>
</div>
<!-- all-user -->
<div class="wg-box">
    <div class="flex items-center justify-between gap10 flex-wrap">
        <div class="wg-filter flex-grow">
            <form class="form-search">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="name" tabindex="2" value="" aria-required="true" required="">
                </fieldset>
                <div class="button-submit">
                    <button class="" type="submit"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
    </div>
   <div class="wg-table table-all-user">
        <ul class="table-title flex gap20 mb-14">
            <li>
                <div class="body-title">Reference</div>
            </li>
            <li>
                <div class="body-title">Description</div>
            </li>
            <li>
                <div class="body-title">Amount</div>
            </li>
            <li>
                <div class="body-title">Balance</div>
            </li>
            <li>
                <div class="body-title">Processed By</div>
            </li>
            <li>
                <div class="body-title text-end">Date</div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @foreach($wallet_history_query as $history)
            <li class="wg-product item-row">
                <div class="body-text">{{$history->reference}}</div>
                <div class="body-text">{{$history->description}}</div>
                <div class="body-text text-{{$history->type=="CREDIT"?"success":"danger"}}">{{$history->type=="CREDIT"?"+":"-"}} ₱{{number_format($history->amount,2)}}</div>
                <div class="body-text">₱{{number_format($history->balance,2)}}</div>
                <div class="body-text">{{$history->processed_username}}</div>
                <div class="body-text text-end">{{$history->created_at}}</div>
            </li>
            @endforeach
        </ul>
    </div>
    @if($wallet_history_query->count()>0)
    <div class="divider"></div>
    <div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">
            Showing {{ $wallet_history_query->count() }} entries
        </div>
        <ul class="wg-pagination">
            <!-- Previous Page Link -->
            @if ($wallet_history_query->onFirstPage())
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-left"></i></a>
                </li>
            @else
                <li>
                    <a href="{{ $wallet_history_query->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                </li>
            @endif

            <!-- Page Number Links -->
            @foreach ($wallet_history_query->getUrlRange(1, $wallet_history_query->lastPage()) as $page => $url)
                <li class="{{ $page == $wallet_history_query->currentPage() ? 'active' : '' }}">
                    <a href="{{ $url }}">{{ $page }}</a>
                </li>
            @endforeach

            <!-- Next Page Link -->
            @if ($wallet_history_query->hasMorePages())
                <li>
                    <a href="{{ $wallet_history_query->nextPageUrl() }}"><i class="icon-chevron-right"></i></a>
                </li>
            @else
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-right"></i></a>
                </li>
            @endif
        </ul>
    </div>
    @endif
</div>
<!-- /all-user -->

@endsection
@section('page_script')
@parent
<script>
    $(".user-menu").addClass("active");
    $(".satellite").addClass("active");
</script>
@endsection
<!-- App js -->