@extends('layouts.master')
@section('title') @lang('translation.transaction-history') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.transaction-history')
@endslot
@endcomponent
@endsection

@section('content')

<h3 class="mb-4">@lang('translation.transaction-history')</h3>

<div class="row row-cols-1 g-4 mb-4" id="transactionLogContainer">
    @include('partials.transaction-log-cards', ['transactions' => $transactions])
</div>
@if ($transactions->hasMorePages())
<div class="text-center mb-4">
    <button class="btn btn-success d-inline-block px-5" id="loadMoreBtn" data-next-page="{{ $transactions->nextPageUrl() }}">
        @lang('translation.show-more')
    </button>
</div>
@endif
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const container = document.getElementById('transactionLogContainer');

        if (loadMoreBtn) {
            loadMoreBtn.addEventListener('click', function() {
                const nextPageUrl = loadMoreBtn.dataset.nextPage;

                if (!nextPageUrl) return;

                loadMoreBtn.disabled = true;
                loadMoreBtn.textContent = 'Loading...';

                fetch(nextPageUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        container.insertAdjacentHTML('beforeend', data.html);

                        if (data.next_page) {
                            loadMoreBtn.dataset.nextPage = data.next_page;
                            loadMoreBtn.disabled = false;
                            loadMoreBtn.textContent = 'Show More';
                        } else {
                            loadMoreBtn.remove();
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        loadMoreBtn.disabled = false;
                        loadMoreBtn.textContent = 'Show More';
                    });
            });
        }
    });
</script>
@endsection