@extends('new_layouts.app')
@section('content')
<div class="vh-100 my-auto overflow-auto body-fix-osahan-footer ">
    <div class="home d-flex flex-column vh-100 container">


        <div class="wallet-container  text-center  mt-2 mb-5">

          
            <div class=" bg-grey p-3">

                <div class="txn-history" style="min-height: 100vh; overflow:auto;">
                    <form action="{{url()->full()}}" method="get" onchange="this.submit();">
                    <input type="date" id="date" max="{{date('Y-m-d')}}" name="date_filter" value="{{request()->get('date_filter')}}" class="text-dark float-end d-block rounded-3 mb-2">
                     </form>
                    <p class="pt-3 mb-2 m-0 text-white" style="font-size: 14px;"><b>History</b></p>
                    <div id="data-wrapper">
                        @if($transcation->count() != 0)
                    @foreach($transcation as $r)
                    @if($r->type == 'cr')
                    <p class="txn-list">Transfer From {{$r->payment_type}}<span class="{{($r->type == 'cr')? 'credit-amount' : 'debit-amount'}}">{{($r->type == 'cr')? "+" : "-"}} ₹{{$r->amount}}</span></p>
                    @elseif($r->type == 'dr')
                    <p class="txn-list">Payment to From {{$r->payment_type}}<span class="{{($r->type == 'cr')? 'credit-amount' : 'debit-amount'}}">{{($r->type == 'cr')? "+" : "-"}} ₹{{$r->amount}}</span></p>
                    @endif
@endforeach
@else
    <!-- no data end start-->
    <div class="nodata text-center text-white">
        <img width="48" height="48" src="https://img.icons8.com/material-outlined/48/FFFFFF/no-data-availible.png" alt="no-data-availible"/>
            <p>No Data</p>
        </div>
        <!-- no data end -->
@endif
</div>
                </div>
            </div>

        </div>


    </div>


</div>
</div>


@php
$ajexUrl = url()->full();
@endphp
<script>

    var ENDPOINT =  "{{$ajexUrl}}";
   var ajexurl = ENDPOINT.replace('amp;', '');
   var ajexurl1 = ajexurl.replace('amp;', '');
   var ajexurl2 = ajexurl1.replace('amp;', '');
   var ajexurl3 = ajexurl2.replace('amp;', '');
   var ajexurl4 = ajexurl3.replace('amp;', '');
    var page = 1;

    $(window).scroll(function () {

        if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 1)) {

            page++;

            infinteLoadMore(page);

        }

    });

  
    function infinteLoadMore(page) {
        
        $.ajax({
            url: ajexurl4,
                datatype: "json",
                type: "get",
                data:{'page':page},
                beforeSend: function () {

                    // $('.auto-load').show();

                }

            })

            .done(function (response) {
                if (response.html == '') {
                    return;
                }
                $("#data-wrapper").append(response.html);

            })

            .fail(function (jqXHR, ajaxOptions, thrownError) {
            });

    }

</script>
@endsection