@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Encashments - {{ucfirst($status)}}</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Encashments</div></a>
        </li>
    </ul>
</div>
<!-- order-list -->
<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>
        <a class="tf-button style-1 w208" href="#"><i class="icon-file-text"></i>Export all Encashments</a>
    </div>

    <div class="wg-table table-all-category">
        <ul class="table-title flex gap20 mb-14">
            <li>
                <div class="body-title">User</div>
            </li>
            <li>
                <div class="body-title">Reference</div>
            </li>
            <li>
                <div class="body-title">Encashment Type</div>
            </li>
            <li>
                <div class="body-title">Requested Amount</div>
            </li>
            <li>
                <div class="body-title">Payout</div>
            </li>
            <li>
                <div class="body-title">Date</div>
            </li>
            <li>
                <div class="body-title">Action</div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @foreach($encashments_query as $encashment)
            <li class="wg-product item-row gap20">
                <div class="name">
                    <div class="image">
                        <img src="{{$encashment->user->profile??url('assets/backoffice/media/profile/default.jpg')}}" alt="{{$encashment->user->profile}}">
                    </div>
                    <div class="title line-clamp-2 mb-0">
                        <a href="#" class="body-text fw-6">{{$encashment->user->firstname}} {{$encashment->user->surname}}</a><br>
                        <a href="#" class="body-text fw-3">{{$encashment->user->username}} {{$encashment->user->id_number}}</a>
                    </div>
                </div>
                <div class="body-text text-main-dark mt-4">{{$encashment->reference}}</div>
                <div class="body-text text-main-dark mt-4">{{$encashment->request_type}}</div>
                <div class="body-text text-main-dark mt-4">₱{{number_format($encashment->request_bonus,2)}}</div>
                <div class="body-text text-main-dark mt-4">₱{{number_format($encashment->payout,2)}}</div>
                <div class="body-text text-main-dark mt-4">{{$encashment->created_at}}</div>

                <div class="list-icon-function">
                    <div class="item eye">
                        <a href="{{route('shop-bo.encashments.show',['status' => $status,'encashment_id' => Crypt::encrypt($encashment->id)])}}"><i class="icon-eye"></i></a>
                    </div>
                    <div class="item eye">
                        <a href="{{route('shop-bo.encashments.print',['encashment_id' => Crypt::encrypt($encashment->id)])}}" target="_blank">
                            <div style="transform: translateY(-2px);">
                                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16">
                                    <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"></path>
                                    <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="item eye">
                        <a href="{{route('shop-bo.encashments.download',['encashment_id' => Crypt::encrypt($encashment->id)])}}">
                            <div style="transform: translateY(-4px);">
                                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
                                   <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
                                   <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div>

            </li>
            @endforeach
        </ul>
    </div>
    @if($encashments_query->count()>0)
    <div class="divider"></div>
    <div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">
            Showing {{ $encashments_query->count() }} entries
        </div>
        <ul class="wg-pagination">
            <!-- Previous Page Link -->
            @if ($encashments_query->onFirstPage())
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-left"></i></a>
                </li>
            @else
                <li>
                    <a href="{{ $encashments_query->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                </li>
            @endif

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

            <!-- Next Page Link -->
            @if ($encashments_query->hasMorePages())
                <li>
                    <a href="{{ $encashments_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>
<!-- /order-list -->

@endsection
@section('page_script')
@parent
<script>
    $(".encashments-menu").addClass("active");
    $(".encashments-{{strtolower($status)}}").addClass("active");
</script>
@endsection
<!-- App js -->